Semantic-UI Progress Color Variation

Last Updated : 09 Mar, 2022

Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.

Semantic UI has a progress component to magnify the progress of a particular task. Users can also choose a particular color for specific progress. Let us see this variation of progress.

Semantic UI Progress Colored Variation is used to display different colors as per your usage. Every progress can be shown in a unique color to depict its importance. A single or group of progress showing relatable content can be displayed in different colors. We will create a UI to show the progress colored variation.

Semantic-UI Progress Colored Variation Classes:

red: This class is used to set the color of the progress into the red.
orange: This class is used to set the color of the progress into orange.
yellow: This class is used to set the color of the progress into yellow.
olive: This class is used to set the color of the progress into the olive.
green: This class is used to set the color of the progress into the green.
teal: This class is used to set the color of the progress into teal.
blue: This class is used to set the color of the progress into blue.
violet: This class is used to set the color of the progress into violet.
purple: This class is used to set the color of the progress into red.
pink: This class is used to set the color of the progress into pink.
brown: This class is used to set the color of the progress into brown.
grey: This class is used to set the color of the progress into grey.

Syntax:

<div class="ui Colored-Variation-Classes progress">
     <div class="bar"></div>
    ...
</div>

Example 1: This example demonstrates progress colored variation along with a non-colored variation.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic-UI Progress Color Variation</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"
            integrity= 
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="ui container"> 
        <br /><br /> 
        <h2 class="ui header green">GeeksforGeeks</h2> 
        <strong>Semantic-UI Progress Color Variation</strong> 
        <hr><br /> 
        <p>Default Color Progress</p> 
  
        <div class="ui progress" 
             data-percent="50"> 
            <div class="bar"></div> 
        </div> 
        <p>Specific Color Progress</p> 
        <div class="ui green progress"
             data-percent="50"> 
            <div class="bar"></div> 
        </div> 
    </div> 
    
    <script> 
        $('.progress').progress(); 
    </script> 
</body> 
  
</html>

Output:

Semantic-UI Progress Color Variation

Example 2: This example demonstrates progress colored variation by putting color names along with the progress class. These are the different colors that you can use to design a semantic UI progress bar.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic-UI Progress Color Variation</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"
            integrity= 
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="ui container"> 
        <br /><br /> 
        <h2 class="ui header green">GeeksforGeeks</h2> 
        <strong>Semantic-UI Progress Color Variation</strong> 
        <hr><br /> 
        <div class="ui red progress" 
             data-percent="10"> 
            <div class="bar"></div> 
            <div class="label">Red</div> 
        </div> 
        <div class="ui orange progress"
             data-percent="15"> 
            <div class="bar"></div> 
            <div class="label">Orange</div> 
        </div> 
        <div class="ui yellow progress" 
             data-percent="20"> 
            <div class="bar"></div> 
            <div class="label">Yellow</div> 
        </div> 
        <div class="ui olive progress"
             data-percent="25"> 
            <div class="bar"></div> 
            <div class="label">Olive</div> 
        </div> 
        <div class="ui green progress" 
             data-percent="30"> 
            <div class="bar"></div> 
            <div class="label">Green</div> 
        </div> 
        <div class="ui teal progress" 
             data-percent="35"> 
            <div class="bar"></div> 
            <div class="label">Teal</div> 
        </div> 
        <div class="ui blue progress" 
             data-percent="40"> 
            <div class="bar"></div> 
            <div class="label">Blue</div> 
        </div> 
        <div class="ui violet progress"
             data-percent="45"> 
            <div class="bar"></div> 
            <div class="label">Violet</div> 
        </div> 
        <div class="ui purple progress" 
             data-percent="50"> 
            <div class="bar"></div> 
            <div class="label">Purple</div> 
        </div> 
        <div class="ui pink progress" 
             data-percent="60"> 
            <div class="bar"></div> 
            <div class="label">Pink</div> 
        </div> 
        <div class="ui brown progress" 
             data-percent="65"> 
            <div class="bar"></div> 
            <div class="label">Brown</div> 
        </div> 
        <div class="ui grey progress"
             data-percent="70"> 
            <div class="bar"></div> 
            <div class="label">Grey</div> 
        </div> 
        <div class="ui black progress"
             data-percent="80"> 
            <div class="bar"></div> 
            <div class="label">Black</div> 
        </div> 
    </div> 
      
    <script> 
        $('.progress').progress(); 
    </script> 
</body> 
  
</html>