Semantic-UI Loader Types
Last Updated :
22 Apr, 2022
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 Text Loader Type is used to create a loader for a particular task.
Used Class:
- ui loader: This class is used to create a loader element.
Example 1: In this example, we will create a simple loader element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Loader Type
</title>
<link rel="stylesheet" href=
<style>
.ui.active.dimmer {
padding: 50px 0;
}
</style>
</head>
<body>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Loader Type</h3>
<div class="ui segment">
<div class="ui active dimmer">
<div class="ui loader"></div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: In this example, we will create a simple loader element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Loader Type
</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 Type</h3>
<div class="ui segment">
<div class="ui active loader"></div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/elements/loader.html#loader
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...