Primer CSS Progress

Last Updated : 28 May, 2025

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.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/>
    <title>Document</title>
</head>
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>Primer CSS Progress Bar</h2>
    <div class="container" style="padding: 2em;">
        <h2>First Progress Bar (Default Size)</h2>
        <span class="Progress">
            <span class="Progress-item 
                  color-bg-success-emphasis" 
                style="width: 30%;">
              </span>
        </span>
    </div>
    <div class="container" style="padding: 2em;">
        <h2>Second Progress Bar (Larger Size)</h2>
        <span class="Progress Progress--large">
            <span class="Progress-item 
                  color-bg-success-emphasis" 
                style="width: 40%;">
              </span>
        </span>
    </div>
    <div class="container" style="padding: 2em;">
        <h2>Third Progress Bar (Smaller Size)</h2>
        <span class="Progress Progress--small">
            <span class="Progress-item 
                  color-bg-success-emphasis" 
                style="width: 50%;">
              </span>
        </span>
    </div>
</body>
</html>

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.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/>
    <title>Document</title>
</head>
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>Primer CSS Progress Bar</h2>
    <div class="container" style="padding: 2em;">
        <span class="text-small color-fg-muted mr-2">
            10 of 16
        </span>
        <span class="Progress d-inline-flex" 
            style="width: 160px">
          <span class="Progress-item 
            color-bg-success-emphasis" 
            style="width: 62.5%">
          </span>
        </span>
    </div>
    <div class="container" style="padding: 2em;">
        <h2>Second Progress Bar</h2>
        <span class="Progress Progress--large">
            <span class="Progress-item 
                color-bg-success-emphasis" 
                style="width: 40%;">
              </span>
            <span class="Progress-item 
                color-bg-attention-emphasis" 
                style="width: 30%;">
              </span>
            <span class="Progress-item 
                color-bg-danger-emphasis" 
                style="width: 20%;">
              </span>
            <span class="Progress-item 
                   color-bg-done-emphasis" 
                style="width: 10%;">
              </span>
        </span>
    </div>
</body>
</html>