Semantic-UI Progress Success State

Last Updated : 07 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 semantic-UI, the progress bars come with a better user interface, along with different amazing classes. The Success State represents the completion of the specific task.

Semantic UI Progress Success State Class:

success: It indicates that the work is done successfully with a green indication.

Syntax:

 <div class="ui success progress">    
     <div class="bar">
        <div class="progress"></div>
    </div>
</div>

Example 1: The following example demonstrates the progress bar of the success state in Semantic-UI.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <titleSemantic-UI Progress Success State</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> 
    <center> 
        <h1 class="ui green header"> 
            GeeksforGeeks 
        </h1> 
        <strong> 
            Semantic-UI Progress Success State 
        </strong> 
        <br /> 
    </center> 
    <div class="ui container"> 
        <div class="ui success progress"
             data-value="10" 
             data-total="10" id="eg"> 
            <div class="bar"> 
                <div class="progress"></div> 
            </div> 
            <div class="label">Successfully Transferred!</div> 
        </div> 
    </div> 
    <script> 
        $('#eg').progress(); 
    </script> 
</body> 
  
</html>

Output:

Semantic-UI Progress Success State

Example 2: The following example demonstrates the progress bar of the success state with some jquery.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic-UI Progress Success State</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> 
    <center> 
        <h1 class="ui green header"> 
            GeeksforGeeks 
        </h1> 
        <strong> 
            Semantic-UI Progress Success State 
        </strong> 
        <br />  
    </center> 
    <div class="ui container"> 
        <div class="ui indicating progress"
             data-value="1" 
             data-total="1" 
             id="eg"> 
            <div class="bar"></div> 
            <div class="label">Downloading</div> 
        </div> 
        <div class="ui button">Download</div> 
    </div> 
    <script> 
        $('.ui.button').on('click', function() { 
            $('#eg').progress({ 
                text: { 
                    success: 'Download Successful!' 
                } 
            }); 
        }); 
    </script> 
</body> 
</html>