Primer CSS Inline Progress

Last Updated : 21 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, and inline. In this article, we will discuss inline progress. Inline progress can be made using progress and d-inline-flex classes along with an inline element such as span, button, etc.

Primer CSS Large Progress Class:

Progress: This class is used to define an element as progress.
d-inline-flex: This class is used to define the inline flexbox container.

Syntax:

<span class="Progress d-inline-flex" style="width: ...">
      <span class="Progress-item 
         color-bg-success-emphasis" 
         style="width: ...%">
      </span>
</span>

Example 1: This example demonstrates the use of the Primer CSS Inline progress using Progress and d-inline-progress classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <title> Primer CSS Inline Progress </title> 
  <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
  <center> 
    <h1 class="color-fg-success"> GeeksforGeeks </h1> 
    <h3> Primer CSS Inline Progress </h3> 
      
    <span class="Progress d-inline-flex mt-5" 
       style="width: 200px"> 
      <span class="Progress-item color-bg-success-emphasis" 
        style="width: 25%"> 
      </span> 
    </span> 
  </center> 
</body> 
  
</html>

Output:

Primer CSS Inline Progress

Example 2: This is another example that demonstrates the use of the Primer CSS Inline progress using Progress and d-inline-progress classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <title> Primer CSS Inline Progress </title> 
  <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
  <center> 
    <h1 class="color-fg-success"> GeeksforGeeks </h1> 
    <h3> Primer CSS Inline Progress </h3> 
      
    <span class="Progress d-inline-flex mt-5" 
       style="width: 200px"> 
      <span class="Progress-item color-bg-danger-emphasis" 
        style="width: 25%"> 
      </span> 
    </span> 
  </center> 
</body> 
  
</html>