Primer CSS Inline Progress Last Updated : 21 Apr, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report 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> Output: Primer CSS Inline Progress Reference: https://primer.style/css/components/progress#inline-progress Comment More infoAdvertise with us Next Article Primer CSS Progress Accessibility Y yourcontactformsubmitted Follow Improve Article Tags : Web Technologies CSS Primer-CSS Primer-CSS Component Similar Reads Primer CSS Large Progress 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 2 min read 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 ste 4 min read Primer CSS Inline Styles 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 2 min read Primer CSS Small Progress 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 2 min read Primer CSS Progress Accessibility 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 2 min read Primer CSS Progress with multiple values 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 2 min read Like