Semantic-UI Progress Progress Content - Coding

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 Progress Progress Content type. This content type indicates the progress of work on the progress bar.

Semantic UI Progress Progress Content Classes:

progress: This class indicates the progress of the work.

Syntax:

<div class="ui progress" data-percent="10">
    <div class="bar">
        <div class="progress">...</div>
    </div>
</div>

Example 1: The following code demonstrates the progress bar of progress content type.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <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> 
    <center> 
        <h1 class="ui green header">Geeksforgeeks</h1> 
        <strong> 
            Semantic-UI Progress Progress Content Type 
        </strong> 
    </center> 
    <div class="ui container"> 
        <div class="ui progress" 
             data-percent="10"
             id="eg"> 
            <div class="bar"> 
                <div class="progress"></div> 
            </div> 
            <div class="label">Transferring files</div> 
        </div> 
    </div> 
    <script> 
        $('#eg').progress(); 
    </script> 
</body> 
    
</html>

Output:

Semantic-UI Progress Progress Content

Example 2: The following code demonstrates the progress bar of progress content type with some javascript.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <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> 
    <center> 
        <h1 class="ui green header">GeeksforGeeks</h1> 
        <strong> 
            Semantic-UI Progress Progress Content Type 
        </strong> 
    </center> 
    <div class="ui container"> 
        <div class="ui progress" 
             data-value="0" 
             data-total="3"
             id="eg"> 
            <div class="bar"> 
                <div class="progress"></div> 
            </div> 
            <div class="label">Transferring files</div> 
        </div> 
        <div class="ui button">Upload file-1</div> 
        <div class="ui button">Upload file-2</div> 
        <div class="ui button">Upload file-3</div> 
    </div> 
    <script> 
        $('.ui.button').on('click', function () { 
            $('.progress').progress('increment'); 
        }); 
    </script> 
</body> 
  
</html>

Output:

Semantic-UI Progress Progress Content

Reference: https://semantic-ui.com/modules/progress.html#progress

Reffered: https://www.geeksforgeeks.org

CSS

Related
Spectre Media
Bulma Basic Navbar
Semantic-UI Progress Size Variation
Semantic-UI Dropdown Multiple Search Selection Type
Semantic-UI Progress Label Content

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	9