Progress Bar
Basic Progress Bar

The Basic Progress Bar component allows you to visually represent the progress of a task or process, providing users with real-time feedback on completion status. This section provides an introduction to the Basic Progress Bar and how to use it effectively.

Example code / preview
            
                HTMLOpenTagdiv class="flex flex-col gap-2"HTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-1/2"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-2/3"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-3/4"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

The Basic Progress Bar is a fundamental component for enhancing user experience by providing clear feedback on task progress. By following the steps outlined above, you can easily integrate it into your project and tailor it to meet your specific requirements.

Progress Bar with Label

The Progress Bar with Label component combines a visual progress bar with a text label to provide users with a clear indication of progress. This section introduces the Progress Bar with Label and how to integrate it into your project effectively.

Example code / preview
50%
60%
70%
            
                HTMLOpenTagdiv class="flex flex-col gap-2"HTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20 h-4"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-1/2"
HTMLCloseTag
    50%
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20 h-4"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-2/3"
HTMLCloseTag
    60%
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20 h-4"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-3/4"
HTMLCloseTag
    70%
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

The Progress Bar with Label component is a valuable addition to your user interface, offering both visual and textual progress updates. By following the steps outlined above, you can seamlessly integrate it into your project and tailor it to suit your specific requirements.

Progress Bar Height

The "Progress Bar Height" section explains how to control the height of progress bars to suit your project's design and layout. Customizing the height allows you to integrate progress bars seamlessly into your application's visual hierarchy.

Example code / preview
            
                HTMLOpenTagdiv class="flex flex-col gap-2"HTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20 h-1"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-1/2"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-2/3"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20 h-3"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-3/4"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

The "Progress Bar Height" section has demonstrated how to control the height of progress bars in your project. By following these guidelines and maintaining consistency, you can create visually appealing and accessible progress bars that align with your application's design.

Progress Bar Color

The "Progress Bar Color" section explains how to customize the colors of progress bars to enhance your application's visual appeal and convey information effectively. You can choose from a variety of colors to match your brand's identity or signify different stages of a process.

Example code / preview
            
                HTMLOpenTagdiv class="flex flex-col gap-2"HTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-1/2"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-2/3 bg-success"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-3/4 bg-warning"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-3/4 bg-danger"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

The "Progress Bar Color" section has shown you how to customize the colors of progress bars to align with your application's design and convey meaning effectively. By choosing the right colors and considering accessibility, you can enhance the user experience and make progress bars an integral part of your application's UI.

Component API

In this section, you will find detailed information about the available props, classes, and options that can be used with the component. Understanding these properties is essential for customizing and configuring the component to suit your specific requirements.

Below is a list of props that can be passed to the component:

Progress
Prop Type Description
No spesific props
Progress.Bar
Prop Type Description
No spesific props