Progress Circle

Display progress in a circular form based on a specified percentage. There is a subtle animation that can be turned off by setting animate="false".

        
            <x-bladewind::progress-circle percentage="45" />
        
    

By default the progress circle label is not displayed. That can be changed by setting show_label="true". The label (the percentage value) is then displayed but without the percentage sign. To display the percentage sign set the attribute show_percent="true".

        <x-bladewind::progress-circle percentage="58" show_label="true" />
    

        
            <x-bladewind::progress-circle
                percentage="58"
                show_label="true"
                show_percent="true" />
        
    

Different Colours

You can display a progress circle in nine different colours by setting the color attribute to the preferred colour. Like most BladewindUI components that have colour options, there are two shades, faint and dark. The default shade is faint and the default colour is blue

Faint Colours

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

Dark Colours

            
                <x-bladewind::progress-circle
                    percentage="10"
                    shade="dark"
                    color="red" />

                ...
            
        

Different Sizes

The progress circle comes in five prebuilt sizes with medium being the default size. To change the size of the circle set the size attribute. The available sizes are tiny, small, medium, big, large

            
                <x-bladewind::progress-circle
                    size="tiny"
                    percentage="10" />

                ...
            
        

Custom Sizes

It is quite difficult to determine the perfect circle size that'll fit designs we don't even know about. For this reason Bladewind allows you to specify a custom size for this component if the prebuilt sizes don't suit your needs. Set the size attribute to any number above 50. Just to give you some context, the table below is a list of the current sizes and their corresponding values.

The table above should give you an idea of what values to use for your custom sizes if you probably need something between small and medium for example. Or you may need a circle outrageously large like the example below.

            
                <x-bladewind::progress-circle
                    size="400"
                    percentage="89" />
            
        

You will notice from the example above the circle width is quite thin for a circle that big. To increase the width of the circle set the circle_width attribute to a reasonable value. The default value for custom circles is 10.

            
                <x-bladewind::progress-circle
                    size="400"
                    circle_width="50"
                    percentage="89" />
            
        

Things get a bit quirky when you need to display labels in custom circles. Again, because the circle size is unknown, it is a bit tricky to properly centre the label in the circle. There are additional attributes to help position the label properly in the circle. See example below.

            
                <x-bladewind::progress-circle
                    percentage="73"
                    size="400"
                    circle_width="50"
                    text_size="50"
                    align="100"
                    valign="0"
                    show_label="true"
                    show_percent="true"
                />
            
        

See the table below for the definitions of the attributes used above.

Full List Of Attributes

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

Progress Circle with all attributes defined

    <x-bladewind::progress-circle
        percentage = "50"
        color = "red",
        show_label = "false",
        show_percent = "false",
        animate = "true",
        size="medium"
        circle_width="50"
        text_size="50"
        align="100"
        valign="0"
        shade = "faint" />