semantic-ui
  1. semantic-ui-loader
PreviousNext

semantic ui Loader - Semantic Elements

The semantic ui loader is a pre-defined component in the Semantic UI CSS framework that provides a progress indicator for an element. In this tutorial, we will explore the syntax, example, output, explanation, use, and important points for the semantic ui loader component.

Syntax

Here is the basic syntax for using the semantic ui loader:

<div class="ui active inverted dimmer">
  <div class="ui loader">Loading</div>
</div>

Example

Let's consider an example of using the semantic ui loader. We can add the loader to any element that needs to indicate loading progress. Here's an example of how to use the semantic ui loader for a button.

<button class="ui primary button">
  <i class="refresh icon"></i>
  Refresh
  <div class="ui active inline mini loader"></div>
</button>
Try Playground

Size

Loaders can have different sizes.

Try Playground

Explanation

The semantic ui loader can be used to visually represent loading progress for a particular element. The loader is a pre-defined component in the Semantic UI CSS framework and can be customized by using different classes.

  • ui active loader class is used to create a loading icon
  • inverted class can be used to invert the color of the loader
  • dimmer class can be used to add a dimmer effect to the container element

By default, the semantic ui loader displays a circular loading animation. In addition, it also supports other animations such as bar, text, and inline.

Use

The semantic ui loader can be used to indicate the loading progress of an element. It is commonly used in situations where the data or content being displayed on the page is being loaded dynamically. This gives the users an idea that the application is still processing and prevents them from assuming the page is broken or frozen.

Important Points

  • The semantic ui loader is a pre-defined component in Semantic UI CSS framework
  • It can display different loading animations based on the class used in combination with the ui active loader class
  • It can be customized using other classes such as inverted and dimmer

Summary

In this tutorial, we explored the semantic ui loader, its syntax, example, output, explanation, use, and important points. The semantic ui loader is a pre-defined component in the Semantic UI CSS framework that provides a progress indicator for an element. It is commonly used in situations where the data or content being displayed on the page is being loaded dynamically. By using the semantic ui loader, the user can be informed that the application is still processing and prevent them from assuming the page is broken or frozen.

ListPlaceholder
Published on: