Progress Bar

Display progress. The progress bar expects a percentage. The bar will then fill up to the percentage specified. There is a subtle animation when the bar is filling up to its desired percentage. The default progress bar color is blue.

        
            <x-bladewind::progress-bar percentage="36" />
        
    

The progress bar percentage is not displayed by default. To display it, set the attribute show_percentage_label="true". The progress bar percentage will then be displayed but within the bar.

        
            <x-bladewind::progress-bar percentage="36" show_percentage_label="true" />
        
    

If you prefer to have the percentage out of the bar, set show_percentage_label_inline="false". With the percentage now out of the bar, you can specify if it should be placed above or below the bar. The default is top left. To change the positioning of the percentage label, you need to set the percentage_label_position attribute. The available options are top left top center top right bottom left bottom center bottom right.

        
            <x-bladewind::progress-bar
                percentage="53"
                show_percentage_label_inline="false"
                percentage_label_position="top center"
                show_percentage_label="true" />
        
    

        
            <x-bladewind::progress-bar
                percentage="75"
                show_percentage_label_inline="false"
                percentage_label_position="top right"
                show_percentage_label="true" />
        
    

You may want to append a suffix or prepend a prefix to the percentage label to achieve things like 53% complete or Upload in progress: 53% complete. Depending on your needs you can set percentage_prefix and/or percentage_suffix.

        
            <x-bladewind::progress-bar
                percentage="75"
                show_percentage_label_inline="false"
                percentage_suffix="complete"
                show_percentage_label="true" />
        
    

Different Colours

You can display a progress bar in nine different colours by setting the color attribute on the progress bar, like this, color="red". Like most BladewindUI components that have colour options, there are two shades, faint, and dark. The default shade is faint

Faint Colours

            
                <x-bladewind::progress-bar percentage="10" color="red" />
            
        

        
            <x-bladewind::progress-bar percentage="20" color="yellow"/>
        
    

        
            <x-bladewind::progress-bar percentage="30" color="green" />
        
    

        
            <x-bladewind::progress-bar percentage="40" color="pink" />
        
    

        
            <x-bladewind::progress-bar percentage="50" color="cyan" />
        
    

        
            <x-bladewind::progress-bar percentage="60" color="gray" />
        
    

        
            <x-bladewind::progress-bar percentage="70" color="purple" />
        
    

        
            <x-bladewind::progress-bar percentage="80" color="orange" />
        
    

        
            <x-bladewind::progress-bar percentage="80" color="violet" />
        
    

        
            <x-bladewind::progress-bar percentage="80" color="fuchsia" />
        
    

        
            <x-bladewind::progress-bar percentage="80" color="indigo" />
        
    

        
            <x-bladewind::progress-bar percentage="90" />
        
    

Dark Colours

            
                <x-bladewind::progress-bar percentage="50" shade="dark" color="red" />
            
        

            
                <x-bladewind::progress-bar percentage="20" shade="dark" color="yellow" />
            
        

            
                <x-bladewind::progress-bar percentage="30" shade="dark" color="green" />
            
        

            
                <x-bladewind::progress-bar percentage="40" shade="dark" color="pink" />
            
        

            
                <x-bladewind::progress-bar percentage="50" shade="dark" color="cyan" />
            
        

            
                <x-bladewind::progress-bar percentage="60" shade="dark" color="gray" />
            
        

            
                <x-bladewind::progress-bar percentage="70" shade="dark" color="purple" />
            
        

        
            <x-bladewind::progress-bar percentage="80" shade="dark" color="orange" />
        
    

        
            <x-bladewind::progress-bar percentage="80" shade="dark" color="violet" />
        
    

        
            <x-bladewind::progress-bar percentage="80" shade="dark" color="indigo" />
        
    

        
            <x-bladewind::progress-bar percentage="80" shade="dark" color="fuchsia" />
        
    

        
            <x-bladewind::progress-bar percentage="90" shade="dark" />
        
    

Striped and Animated

        
            <x-bladewind::progress-bar percentage="60" shade="dark" color="red" striped="true" />
        
    

    <x-bladewind::progress-bar
        percentage="50"
        shade="dark"
        color="violet"
        striped="true"
        animated="true" />

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Progress Bar component.

Progress Bar with all attributes defined

<x-bladewind::progress-bar
    percentage="50"
    color="red"
    show_percentage_label="false"
    show_percentage_label_inline="true"
    percentage_label_position="top-left"
    shade="faint"
    percentage_prefix="uploading content: "
    percentage_suffix="completed"
    striped="true"
    animated="true"
    class="m-0" />