Display progress in a circular form based on a specified percentage.
There is a subtle animation that can be turned off by setting
<x-bladewind.progress-circle percentage="45" />
By default the progress circle label is not displayed. That can be changed by setting
The label (the percentage value) is then displayed but without the percentage sign. To display the percentage sign set the attribute
<x-bladewind::progress-circle percentage="58" show_label="true" />
<x-bladewind::progress-circle percentage="58" show_label="true" show_percent="true" />
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,
dark. The default shade is
faint and the default colour is
<x-bladewind.progress-circle percentage="10" color="red" /> ...
<x-bladewind.progress-circle percentage="10" shade="dark" color="red" /> ...
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
<x-bladewind.progress-circle size="tiny" percentage="10" /> ...
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.
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
circle_width attribute to a reasonable value.
The default value for custom circles is
<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.
The table below shows a comprehensive list of all the attributes available for the Progress Bar component.
|percentage||0||Any value between 0 and 100.|
|color||blue||There are nine colors to choose from.
|size||medium||The available sizes are:
|show_label||false||Should the percentage label be displayed.
|show_percent||false||Should the percentage sign be displayed.
|animate||true||Should the progress circle be animated when loaded.
|text_size||30||Controls how big the text should be. You can think of this as font size. Value can be any positive number|
|align||40||Controls the position of the text horizontally. You will need to keep tweaking this value until the text sits in a position you desire.|
|valign||0||Controls the position of the text vertically. 0 keeps the text in the centre of the circle. You will need to keep tweaking this value until the text sits in a position you desire. Negative values will position the text towards the top of the circle.|
|circle_width||30||Controls the thickness of the circle. Value can be any positive number.|
<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" />
resources > views > components > bladewind > progress-circle.blade.php