Open In App

Semantic-UI Progress Error 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 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 good interface and with different amazing classes. In this article let us see about the progress error state. An error state depicts a different output, other than the desired or expected state.

Semantic UI Progress Error State Class:

  • error: It indicates the undesirable condition notified with an alert message.

Syntax:

<div class="ui progress error">
    <div class="bar">
      <div class="progress"></div>
    </div>
  <div class="label">Error</div>
</div>

Example: The following code demonstrates the progress bar of the error state.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic-UI Progress Error 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 Error State
        </strong><br />
    </center>
    <div class="ui container">
        <div class="ui progress error " 
             data-value="10" 
             data-total="10" 
             id='eg'>
            <div class="bar">
                <div class="progress"></div>
            </div>
            <div class="label">Network Error!</div>
        </div>
    </div>
    <script>
        $('#eg').progress();
    </script>
</body>
</html>


Output:

Semantic-UI Progress Error State

Example 2: The following code demonstrates the progress bar of the error state.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic-UI Progress Error 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 Error State
        </strong>
        <br /> 
    </center>
    <div class="ui container">
        <div class="ui progress error" id='eg'>
            <div class="bar">
                <div class="progress">2%</div>
            </div>
            <div class="label">
                Error: Ran out of Space, can't download!
            </div>
        </div>
    </div>
    <script>
        $('#eg').progress()
    </script>
</body>
</html>


Output:

Semantic-UI Progress Error State

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



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