Primer CSS Progress with multiple values

Last Updated : 24 Apr, 2022

Primer CSS is a free open-source CSS framework that is built upon systems that create 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 highly reusable and flexible. It is created with GitHub’s design system.

Primer CSS offers various progress bars such as large, small, Progress with multiple values, and inline. In this article, we will discuss Progress with multiple values. Progress with multiple values is used to indicate the tasks at different stages of progress such as 'done', 'In progress', or 'open'.

Primer CSS Progress with multiple values used classes:

progress-item: This class is used to indicate a progress item.
color-bg-success-emphasis: This class is used to highlight the progress bar with green color.
color-bg-attention-emphasis: This class is used to highlight the progress bar with yellow color.
color-bg-danger-emphasis: This class is used to highlight the progress bar with red color.
color-bg-accent-emphasis: This class is used to highlight the progress bar with blue color.

Syntax:

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

Example 1: This example demonstrates the use of Primer CSS Progress with multiple values.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Primer CSS Progress with multiple values
    </title>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/Primer/0.0.0-20220329110403/primer.css">
</head>

<body>
    <center>
        <h1 class="color-fg-open">
            GeeksforGeeks
        </h1>
        
        <h4>Primer CSS Progress with multiple values</h4>

        <span class="Progress mt-5" style="width: 40rem;">
            <span class="Progress-item color-bg-success-emphasis"
                style="width: 70%;">
            </span>
            <span class="Progress-item color-bg-attention-emphasis"
                style="width: 30%;">
            </span>
        </span>
    </center>
</body>

</html>

Output:

Example 2: This is another example that demonstrates the use of Primer CSS Progress with multiple values.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Primer CSS Progress with multiple values
    </title>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/Primer/0.0.0-20220329110403/primer.css">
</head>

<body>
    <center>
        <h1 class="color-fg-open">
            GeeksforGeeks
        </h1>
        
        <h4>Primer CSS Progress with multiple values</h4>

        <span class="Progress mt-5" style="width: 40rem;">
            <span class="Progress-item color-bg-danger-emphasis"
                style="width: 27%;">
            </span>
            <span class="Progress-item color-bg-accent-emphasis"
                style="width: 73%;">
            </span>
        </span>
    </center>
</body>

</html>

Output:

Reference: https://primer.style/css/components/progress#progress-with-multiple-values

Primer CSS Progress with multiple values

singhtripti

Improve

Article Tags :

Primer CSS Progress with multiple values

Similar Reads

Thank You!

What kind of Experience do you want to share?