Semantic-UI Icon Loading State Last Updated : 14 Feb, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. HTML <!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </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 Comment More infoAdvertise with us Next Article Semantic-UI Button States Loading M manavsarkar07 Follow Improve Article Tags : Web Technologies CSS Semantic-UI Semantic-UI Elements Similar Reads Semantic-UI Input Loading State Semantic UI is a framework that is used to build a great user interface. It is an open-source framework that uses CSS and jQuery. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic-UI Input class is used to create a basic in 2 min read Semantic-UI Form Loading State Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements. A form is the section of a document that cont 3 min read Semantic-UI Button States Loading Semantic UI offers many components for users to design their interface. Semantic UI Button States offers us so many states in buttons like active, disabled, and loading. In this article, we will discuss the loading state. The Semantic UI Button States Loading state variant is used to create a loadin 2 min read Semantic-UI Dropdown Loading State Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. A Semantic UI Dropdown allows a user to select a value from a series of options. Sema 2 min read Semantic-UI Tab Loading State Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI offers a tab component for users to bundle up different categories of con 3 min read Semantic-UI Loader States 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 li 2 min read Like