Open In App

Semantic-UI Progress Warning State

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 module indicates 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 good interface and with different amazing classes.  In this article, we will see about the Progress Warning State in Semantic-UI.

Semantic UI Progress Warning State Class:

  • warning: It indicates a warning by yellow color indication.

Syntax:

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

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

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic-UI Progress Warning State</title>
    <link href=
          rel="stylesheet" />
    <script src=
            integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
            crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 class="ui green header">
            GeeksforGeeks
        </h1
        <strong>
            Semantic-UI Progress Warning State
        </strong>
        <br /> 
    </center>
    <div class="ui container">
        <div class="ui warning progress">
            <div class="bar">
                <div class="progress"></div>
            </div>
            <div class="label">
                Malware detected in some files
            </div>
        </div>
    </div>
</body>
</html>


Output:

Semantic-UI Progress Warning State

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

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic-UI Progress Warning State</title>
    <link href=
          rel="stylesheet" />
    <script src=
            integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
            crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 class="ui green header">
            GeeksforGeeks
        </h1
        <strong>
            Semantic-UI Progress Warning State
        </strong>
        <br /> 
    </center>
    <div class="ui container">
        <div class="ui warning progress" 
             data-value="100" 
             data-total="100" id='eg'>
            <div class="bar">
                <div class="progress"></div>
            </div>
            <div class="label">
                Warning : Disk space is getting less 
            </div>
        </div>
    </div>
    <script>
        $('#eg').progress()
    </script>
</body>
</html>


Output:

Semantic-UI Progress Warning State

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



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