logo
v2.7.0

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.

36%

        
            <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.

36%

53%

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

75%

        
            <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.

75% complete

        
            <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.

IMPORTANT: Projects running Laravel 8 please read this

Option Default Available Values
percentage 0 Any value between 0 and 100.
color primary There are twelve colors to choose from.

primaryred yellow green blue pink cyan purple gray orange violet indigo fuchsia
show_percentage_label false Should the percentage label be displayed.
true false
show_percentage_label_inline true Should the percentage label be displayed within the progress bar.
true false
percentage_label_position top-left Specifies the placement of the percentage label.
top-left top-center top-right bottom-left bottom-center bottom-right
shade faint Works with color to determine how faint or dark the progress bar colours are.
faint dark
percentage_prefix blank Specifies what text should be displayed before the percentage label.
percentage_suffix blank Specifies what text should be displayed after the percentage label.
percentage_label_opacity 100 Specifies the opacity of the percentage label. In case you want the percentage label to be displayed a shade less than the prefix or suffix. Available values are what's been defined in the TailwindCSS docs for opacity without the 'opacity-' prefix.
0 5 10 20 25 30 40 50 60 70 75 80 90 95 100
class bw-progress-bar Any additional css you wish to add.
striped false Determines if the progress bar should be striped.
true false
animated false Determines if the striped progress bar should be animated.
true false

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" />

The source file for this component is available in resources > views > components > bladewind > progress-bar.blade.php