Semantic-UI Input Loading State Last Updated : 08 Mar, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 input User Interface. The Semantic-UI Input Loading State is used to display a loading icon into the input field that represents currently loading form data. Semantic-UI Input Loading State Used Class: loading: This class is used to create a loading effect on the form element. Syntax: <div class="ui icon input loading"> ... </div> Example 1: In this example, we will describe the use of Semantic-UI Input Loading State. HTML <!DOCTYPE html> <html> <head> <title> Semantic-UI Input Loading State </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui center aligned container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Input Loading State</h3> <div class="ui left icon input loading"> <input type="text" placeholder="User name"> <i class="user icon"></i> </div> <br><br> <div class="ui left icon input loading"> <input type="password" placeholder="Password"> <i class="eye icon"></i> </div> </div> </body> </html> Output: Semantic-UI Input Loading State Example 2: In this example, we will describe the use of Semantic-UI Input Loading State. HTML <!DOCTYPE html> <html> <head> <title> Semantic-UI Input Loading State </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui center aligned container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Input Loading State</h3> <div class="ui input loading icon focus"> <input type="text" placeholder="User name"> <i class="user icon"></i> </div> <br><br> <div class="ui icon loading input"> <input type="email" placeholder="Email Id"> <i class="search icon"></i> </div> <br><br> <div class="ui icon loading input"> <input type="password" placeholder="Password"> <i class="eye icon"></i> </div> </div> </body> </html> Output: Semantic-UI Input Loading State Reference: https://semantic-ui.com/elements/input.html#loading Comment More infoAdvertise with us Next Article Semantic-UI Tab Loading State P ppatelkap Follow Improve Article Tags : Web Technologies CSS Geeks Premier League Geeks-Premier-League-2022 Semantic-UI Semantic-UI Elements +1 More Similar Reads Semantic-UI Icon Loading State 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 t 2 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 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 Input States Semantic UI is an open-source framework that offers us special classes to create stunning and responsive user interfaces. It makes use of jQuery and CSS to create pleasant user interfaces that are very much like bootstrap. It has many classes which are used for styling different elements in the HTML 3 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 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 Like