Open In App

Semantic-UI Progress Disabled State

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

Semantic UI has a bunch of components for user interface design. One of them is the progress component. Progress is used to magnify the progress of a particular task. Depending on the requirements of the usage of progress there are different states of it. One of them is the disabled state.

The user might need to show disabled progress by default. The user might need to display some progress in UI whose values are not to be changed or the person does not have the access to interact with it. There are certain conditions where progress gets disabled if i is completed. In that case, a disabled state comes in handy. 

Semantic UI Progress Disabled State Class:

  • disabled: This class is used to specify the disabled state of progress.

Syntax:

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

These examples demonstrate progress or group of progress in a disabled state by using the disabled class.

Example 1 :

HTML




<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" 
         href=
   <script src=
   </script>
   <script src=
   </script>
</head>
<body>
   <br><br>
   <center>
      <h1 class="ui green header">Geeksforgeeks</h1>
      <strong>
      Semantic-UI Progress Disabled State
      </strong>
      <br><br>
   </center>
   <div class="ui container">
      <div class="ui disabled progress" 
         data-percent="100"
         id="eg">
         <div class="bar">
            <div class="progress"></div>
         </div>
         <div class="label">Files downloaded</div>
      </div>
   </div>
   <script>
      $('#eg').progress();
   </script>
</body>
</html>


Output:

Semantic-UI Progress Disabled State

Semantic-UI Progress Disabled State

Example 2:

HTML




<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" 
         href=
   <script src=
   </script>
   <script src=
   </script>
</head>
<body>
   <div class="ui container">
      <br><br />
      <h2 class="ui header green">GeeksforGeeks</h2>
      <strong>Semantic-UI Progress Disabled State</strong>
      <hr>
      <br>
      <div class="ui red disabled progress"
           data-percent="15">
         <div class="bar"></div>
         <div class="label">Red</div>
      </div>
      <div class="ui orange disabled progress"
           data-percent="30">
         <div class="bar"></div>
         <div class="label">Orange</div>
      </div>
      <div class="ui yellow disabled progress"
           data-percent="45">
         <div class="bar"></div>
         <div class="label">Yellow</div>
      </div>
      <div class="ui blue disabled progress"
           data-percent="60">
         <div class="bar"></div>
         <div class="label">Blue</div>
      </div>
   </div>
   <script>
      $('.progress').progress();
   </script>
</body>
</html>


Output:

Semantic-UI Progress Disabled State

Semantic-UI Progress Disabled State

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



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