Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts.
Semantic UI Icon is a glyph that is used to display something else in place of text to save space and time. Icons are used to help users to navigate around and have the same meaning across all languages and hence many items need not be written in different languages.
Semantic UI Icon loading state can be used to make the icon a simple loader. The icon will rotate as a loading indicator.
Semantic-UI Icon Loading State Classes:
- loading: On adding this class, the icon will start rotating, appearing as to be loading.
Syntax: Add the loading class which will make the icon a simple loader as follows:
<i class="loading icon">
...
</i>Example: Below example illustrate the Semantic UI Icons loading state. In this example, we have made the icon a simple loader by adding the loading class.
<!DOCTYPE html> <html>
<head>
<link href=
rel="stylesheet"/>
<script src=
</script>
<script src=
</script>
<style>
body
{
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<div class="ui container">
<center>
<h1 class="ui header green">
GeeksforGeeks
</h1>
<strong>
Semantic UI Icon Link Variation
</strong>
<div class="ui segment">
<i class="loading globe huge icon"></i>
</div>
</center>
</div>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/elements/icon.html#loading