Primer CSS Progress

Primer CSS is a free open-source CSS framework that is built upon the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is a highly reusable model.

One such component of Primer CSS is Progress Bar. In this article, we will learn about the Progress Bar component in Primer CSS. Progress Bar is a very useful component in displaying the progress of a user in completing a particular task like creating an account, reaching a particular goal, or downloading or uploading progress. It is used extensively in modern-day websites. 

We can create Progress Bar using Primer CSS by adding the ".Progress" class to the element and adding the value of progress (in percentage) and the color of the progress bar inside the element with the class ".Progress-item".

The different components of Primer CSS Progress Bar are given below:

• Large Progress: We can create a large progress bar in Primer CSS by adding the class ".Progress--large" to the Progress element. It makes the height of the Progress bar a little bigger than the default value. 
• Small Progress: We can create a small Progress Bar in Primer CSS by adding the class ".Progress--small" to the Progress element. It makes the height of the Progress bar a little smaller than the default value.
• Inline Progress: We can create an inline Progress Bar in Primer CSS by adding classes ".Progress" and ".d-inline-flex" inside an inline element like span and then we need a custom width for the Progress Bar.
• Accessibility: In Primer CSS Progress Bar, we can add the "aria-label" attribute to describe the Progress Bar where it is not possible to describe the Progress Bar in text inside the website.
• Creating Multiple value Progress Bar: We can easily create a multiple-value Progress Bar by adding the multiple children inside the Progress element and giving them different colors and different width values which adds up to 100%. All the children are stacked from left to right.

Syntax: 

<span class="Progress">
 <span class="Progress-item color-bg-success" 
 style="width=".."" >
 </span>
</span>

Note: Here we have used the ".color-bg-success" background color, you can use any other primer CSS background utilities color.

Example 1: We have created 3 progress bars. The first one is of the default size, the second one is larger, and the third one is smaller.

Output:

Example 2: Here we have created two Progress Bar. The first one is an inline Progress Bar, the second one is a multiple-line Progress Bar.

Output: