Semantic-UI Progress States
Semantic UI is an open-source UI framework that uses CSS and jQuery to build great web experiences. It is also compatible with other CSS frameworks like Bootstrap.
A Progress module is used to show the progress of a task to the user. In this article, we will be seeing the different states of the progress module in Semantic UI. The Semantic-UI Progress States offers us son many states all the states are mentioned and described below.
Semantic-UI Progress States:
- active: This class is used on the progress module to set its state to active.
- success: This class is used on the progress module to set its state to success.
- warning: This class is used on the progress module to set its state to warn.
- error: This class is used on the progress module to set its state to error.
- disabled: This class is used on the progress module to set its state to disabled.
Syntax:
<div class="ui Progress-States progress">
....
</div>Example1: The below example shows the use of the progress state classes to change the state of a progress bar.
HTML
<!DOCTYPE html><html> <head> <title>Semantic UI - Progress States</title> <link rel="stylesheet" href= /> <script src= </script> <script src= </script> <style> .ui.container { text-align: center; } h3 { margin-top: 0px; } .ui.progress { margin-top: 30px !important; } </style> </head> <body> <div class="ui container"> <div> <h1 class="ui green header">GeeksforGeeks</h1> <strong>Semantic UI - Progress States</strong> </div> <div class="ui active progress" data-value="25" data-total="100"> <div class="bar"> <div class="progress"></div> </div> <div class="label">Progress - Active State</div> </div> <div class="ui progress success" data-value="100" data-total="100"> <div class="bar"> <div class="progress"></div> </div> <div class="label">Progress - Success State</div> </div> <div class="ui warning progress" data-value="100" data-total="100"> <div class="bar"> <div class="progress"></div> </div> <div class="label">Progress - Warning State</div> </div> <div class="ui error progress" data-value="100" data-total="100"> <div class="bar"> <div class="progress"></div> </div> <div class="label">Progress - Error State</div> </div> <div class="ui disabled progress" data-value="100" data-total="100"> <div class="bar"> <div class="progress"></div> </div> <div class="label">Progress - Disabled State</div> </div> </div> <script> $(".ui.progress").progress(); </script> </body></html> |
Output:
Semantic-UI Progress States
Example2: The example below shows the use of progress states in Semantic UI with different sizes of the progress bar.
HTML
<!DOCTYPE html><html> <head> <title>Semantic UI - Progress States</title> <link rel="stylesheet" href= /> <script src= </script> <script src= </script> <style> .ui.container { text-align: center; padding: 10%; } h3 { margin-top: 0px; } .ui.progress { margin-top: 30px !important; } </style> </head> <body> <div class="ui container"> <div> <h1 class="ui green header">GeeksforGeeks</h1> <strong>Semantic UI - Progress States</strong> </div> <!-- Active & Tiny Progress Bar --> <div class="ui active progress tiny" data-value="25" data-total="100"> <div class="bar"> <div class="progress"></div> </div> <div class="label"> Progress - Active State and Tiny Sized </div> </div> <!-- Success & Small Progress Bar --> <div class="ui progress success small" data-value="100" data-total="100"> <div class="bar"> <div class="progress"></div> </div> <div class="label"> Progress - Success State and Small Sized </div> </div> <!-- Warning & Normal Sized Progress Bar --> <div class="ui warning progress" data-value="100" data-total="100"> <div class="bar"> <div class="progress"></div> </div> <div class="label"> Progress - Warning State and Normal Sized </div> </div> <!-- Error & Large Progress Bar --> <div class="ui error progress large" data-value="100" data-total="100"> <div class="bar"> <div class="progress"></div> </div> <div class="label"> Progress - Error State and Large Sized </div> </div> <!-- Disabled & Big Progress Bar --> <div class="ui disabled progress big" data-value="100" data-total="100"> <div class="bar"> <div class="progress"></div> </div> <div class="label"> Progress - Disabled State and Big Sized </div> </div> </div> <script> $(".ui.progress").progress(); </script> </body></html> |
Output:
Semantic UI Progress States with size variation
Reference link: https://semantic-ui.com/modules/progress.html#active
Please Login to comment...