Blaze UI Progress
Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit that provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. Its project is available open-source so a large community maintains it.
Blaze UI Progress is used to show the progress of an event such as uploading or downloading a file. It is a customizable progress bar that can have different colors and can have different styles depending upon the attributes.
Blaze UI Progress Types:
- Simple: This is a simple progress bar. It can have different colors.
- Stacked: This progress bar can contain two or more progress bars inside it. The progress bar inside it is an individual progress bar and can contain different colors.
- Colors and Sizes: This progress bar can be colored and we can change the size of the bar also.
- Rounded: The progress bar can also have rounded corners. This is a progress bar whether simple or stacked, that can have rounded corners.
Blaze UI Progress Attributes:
- type: This sets the color of the progress bar.
- rounded: This sets the corners rounded if true.
- value: This takes the amount of progress done.
- min: It is the minimum value of the progress bar.
- max: It is the maximum value of the progress bar.
- size: This sets the size of the progress bar: The different sizes are as follows:
- color: The color of the progress bar can be changed. Here are the different colors:
<blaze-progress size="medium" rounded> <blaze-progress-bar value="50" type="info"> 50% </blaze-progress-bar> </blaze-progress>
Example 1: In the following example, we have a progress bar in which we can change the value using the two buttons below it.
Example 2: In the following example, we will change the size of the progress bar using buttons.
Example 3: In the following example, we have a stacked progress bar with a rounded corner. We can even toggle the rounded corner of the progress bar with the button.
Example 4: In the following example, we have a progress bar whose value we can shrink or increase as well as change the color of the progress bar.