Semantic-UI Progress Inverted Color Variation

Last Updated : 25 Mar, 2022

Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.

The progress bars indicate the progress of the work done out of the total work. It visually indicates the amount of work done using the bars. In this article, we will learn about the Semantic-UI Progress Inverted Color Variation. The Inverted Color Variation is used to invert the color for the better contrast on dark backgrounds.

Semantic-UI Progress Standard Type classes:

progress: This class is used to indicate the progress of the event.
inverted: This class is used to invert the color for generating better contrast with dark background.

Syntax:

<div class="ui color inverted progress">
  <div class="bar">
       <div class="progress"></div>
  </div>
</div>

Example 1: Below is the code that demonstrates the Progress Inverted Color Variation.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <title> 
    Semantic-UI Progress Inverted Color Variation 
  </title> 
  
  <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/> 
  
  <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
  </script> 
  
  <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
  </script> 
</head> 
  
<body style="margin-inline: 10rem;"> 
  <center> 
    <h1 class="ui green header"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        Semantic-UI Progress Inverted Color Variation 
    </h3> 
  </center> 
  
  <div class="ui inverted segment"> 
    <div class="ui yellow inverted progress gfg"> 
      <div class="bar"> 
        <div class="progress"></div> 
      </div> 
    </div> 
  
    <div class="ui olive inverted progress gfg"> 
      <div class="bar"> 
        <div class="progress"></div> 
      </div> 
    </div> 
  
    <div class="ui green inverted progress gfg"> 
      <div class="bar"> 
        <div class="progress"></div> 
      </div> 
    </div> 
      
    <div class="ignored"> 
      <div class="ui icon buttons"> 
        <div class="increment ui basic  
          inverted green button icon"> 
          Increase 
         </div> 
          
         <div class="decrement ui basic  
          inverted red button icon"> 
          Decrease 
         </div> 
      </div> 
    </div> 
  </div> 
  
  <script> 
    $('.decrement.ui.basic.inverted.red.button.icon').on('click', function() { 
      $('.gfg') 
        .progress('decrement') 
      ; 
    }); 
  
    $('.increment.ui.basic.inverted.green.button.icon').on('click', function() { 
      $('.gfg') 
        .progress('increment') 
      ; 
    }); 
  </script> 
</body> 
  
</html>

Output:

Semantic-UI Progress Inverted Color Variation

Example 2: Below is the another code that demonstrates the Progress Inverted Color Variation with different color.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <title> 
    Semantic-UI Progress Inverted Color Variation 
  </title> 
  
  <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/> 
  
  <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
  </script> 
  
  <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
  </script> 
</head> 
  
<body style="margin-inline: 30rem;"> 
  <center> 
    <h1 class="ui green header"> 
      GeeksforGeeks 
    </h1> 
  
    <h3> 
        Semantic-UI Progress Inverted Color Variation 
    </h3> 
  </center> 
  
  <div class="ui inverted segment"> 
    <div class="ui teal inverted progress gfg"> 
      <div class="bar"> 
        <div class="progress"></div> 
      </div> 
    </div> 
  
    <div class="ui blue inverted progress gfg"> 
      <div class="bar"> 
        <div class="progress"></div> 
      </div> 
    </div> 
  
    <div class="ui violet inverted progress gfg"> 
      <div class="bar"> 
        <div class="progress"></div> 
      </div> 
    </div> 
      
    <div class="ignored"> 
      <div class="ui icon buttons"> 
        <div class="increment ui basic  
          inverted green button icon"> 
          Increase 
        </div> 
          
        <div class="decrement ui basic  
           inverted red button icon"> 
           Decrease 
        </div> 
      </div> 
    </div> 
  </div> 
  
  <script> 
    $('.decrement.ui.basic.inverted.red.button.icon').on('click', function() { 
      $('.gfg') 
        .progress('decrement') 
      ; 
    }); 
  
    $('.increment.ui.basic.inverted.green.button.icon').on('click', function() { 
      $('.gfg') 
        .progress('increment') 
      ; 
    }); 
  </script> 
</body> 
  
</html>