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 interactive interfaces. It can also be directly used via CDN like bootstrap.
Semantic-UI Loader Active State is used to display the loader that can be active or visible.
Used Class:
- active: This class is used to display the active state of a loader.
Syntax:
<div class="ui segment">
<div class="ui active loader"></div>
</div>Example 1: This example describes the Loader Active State.
HTML
<!DOCTYPE html> <html>
<head>
<title>
Semantic-UI Loader Active State
</title>
<link rel="stylesheet" href=
<style>
.ui.segment {
padding: 50px 0;
}
</style>
</head>
<body>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Loader Active State</h3>
<div class="ui segment">
<div class="ui active dimmer">
<div class="ui text loader">
GeeksforGeeks Loading...
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: This example describes the Loader Active State.
HTML
<!DOCTYPE html> <html>
<head>
<title>
Semantic-UI Loader active States
</title>
<link rel="stylesheet" href=
<style>
.ui.segment {
padding: 50px 0;
}
</style>
</head>
<body>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Loader active States</h3>
<div class="ui segment">
<div class="ui active loader"></div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/elements/loader.html#active