Semantic-UI Progress Standard Types

Introduction

Semantic-UI is a modern front-end development framework that provides a wide range of UI components to help developers create beautiful and responsive web applications. One of the most important components in Semantic-UI is the Progress component, which allows developers to create progress bars and loaders easily and quickly.

In this article, we will focus on the standard types of the Semantic-UI Progress component and show you how to use them in your projects.

Basic Usage

The basic usage of the Semantic-UI Progress component is very simple. Here is an example of how to create a default progress bar:

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

By default, the Progress component will create a progress bar without any label or value. To add a label, you can use the label attribute:

<div class="ui progress" data-percent="50" data-total="100" data-label>
  <div class="bar"></div>
</div>

In this example, we set the data-percent attribute to 50 and the data-total attribute to 100, which means that the progress bar is 50% completed. We also set the data-label attribute to add a label to the progress bar.

Standard Types

Semantic-UI provides several standard types of progress bars that you can use in your projects. These types include success, warning, error, and info.

Success Type

The success type is used to indicate a task that has been successfully completed. Here is an example of how to create a success progress bar:

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

Warning Type

The warning type is used to indicate a task that is in progress but may require attention. Here is an example of how to create a warning progress bar:

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

Error Type

The error type is used to indicate a task that has encountered an error. Here is an example of how to create an error progress bar:

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

Info Type

The info type is used to indicate a task that provides information. Here is an example of how to create an info progress bar:

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

Conclusion

The Semantic-UI Progress component provides a flexible and easy-to-use way to create progress bars and loaders for your web applications. By using the standard types of progress bars, you can provide users with a clear and intuitive indication of the progress of their tasks.