Primer CSS Progress with multiple values Last Updated : 24 Apr, 2022 Comments Improve Suggest changes 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, 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: Primer CSS Progress with multiple values 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: Primer CSS Progress with multiple values Reference: https://primer.style/css/components/progress#progress-with-multiple-values Comment More infoAdvertise with us Next Article Primer CSS Progress with multiple values S singhtripti Follow Improve Article Tags : Web Technologies CSS Primer-CSS Primer-CSS Component Similar Reads Primer CSS Inline 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 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 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 Foundation CSS Progress Bar with Text Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, 3 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 EasyUI jQuery progressbar widget In this article, we will learn how to design a progress bar widget using the jQuery Easy UI progress bar. The component can be created from HTML markup or programmatically. EasyUI is an HTML5 framework for using user interface components based on jQuery, React, Angular, and Vue technologies. It help 2 min read Foundation CSS Kitchen Sink Progress Bar Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass 2 min read jQuery UI progressbar classes Option jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI progressbar classes option is used to add some additional classes to add the widget's elements. Syntax: $( ".selector" 1 min read Primer CSS Property order 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. Primer CSS Property Order is an impor 2 min read Like