How it works
Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.
- We use the
.progressas a wrapper to indicate the max value of the progress bar. - We use the inner
.progress-barto indicate the progress so far. - The
.progress-barrequires an inline style, utility class, or custom CSS to set their width. - The
.progress-baralso requires someroleandariaattributes to make it accessible.
Basic Example
Progress bar with QBoat Theme color
Basic Example
Add class .progress-bar with .bg-primary, .theme-color1,.theme-color2,.theme-color3,.theme-color3
