Open In App

Semantic-UI Progress Bar Content

Improve
Improve
Like Article
Like
Save
Share
Report

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 Bar Content. It creates the progress element that can contain a progress bar visually.

Semantic-UI Progress Bar Content Class:

  • bar: This class is used to create a progress bar of the element.

Syntax:

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

Example 1: In this example, we will describe the Semantic-UI Progress Bar Content.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Progress Bar Content
    </title>
    <link rel="stylesheet"
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div class="ui container center aligned">
        <h2 class="header ui green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Progress Bar Content</h3>
  
        <div class="ui progress"
             data-percent="60"
             id="eg">
            <div class="bar"></div>
            <div class="label">Transferring files</div>
        </div>
    </div>
      
    <script>
        $('#eg').progress();
    </script>
</body>
  
</html>


Output:

Semantic-UI Progress Bar Content

Semantic-UI Progress Bar Content

Example 2: In this example, we will describe the Semantic-UI Progress Bar Content.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Progress Bar Content
    </title>
    <link rel="stylesheet"
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div class="ui container center aligned">
        <h2 class="header ui green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Progress Bar Content</h3>
  
        <div class="ui green progress" 
             data-percent="70"
             id="eg">
            <div class="bar"></div>
            <div class="label">Transferring files</div>
        </div>
    </div>
      
    <script>
        $('#eg').progress();
    </script>
</body>
  
</html>


Output:

Semantic-UI Progress Bar Content

Semantic-UI Progress Bar Content

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



Last Updated : 08 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads