bladewindUI

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


Dark Colours

                    
                        <x-bladewind.progress-bar percentage="10" 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="90" shade="dark" />
                    
                

 

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 blue There are nine colors to choose from.
red yellow green blue pink cyan purple gray orange
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.

 

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",
                        class="m-0" />
                
            

 

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