Semantic-UI Dropdown Loading State Last Updated : 28 Feb, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. Semantic-UI Dropdown offers us 11 types of dropdown and 3types of content Header, divider, and icon. In this article, we will learn about Loading State. The Semantic-UI Dropdown Loading State is used to create a dropdown that shows its data is currently loading. Semantic-UI Dropdown Loading State Class: loading: This class is used to create a dropdown that shows its data is currently loading. Syntax: <div class="ui loading dropdown"> Dropdown <i class="dropdown icon"></i> <div class="menu"> <div class="item">Choice 1</div> ... </div> </div> The below example illustrates the Semantic-UI Dropdown Loading State: Example 1: HTML <!DOCTYPE html> <html> <head> <title>Semantic-UI Dropdown Loading State</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <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> </head> <body> <center> <div class="ui container"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Semantic-UI Dropdown Loading State</h3> <div class="ui loading dropdown"> Company <i class="dropdown icon"></i> <div class="menu"> <div class="item">GFG</div> <div class="item">gfg</div> </div> </div> </div> <script> $('.ui.dropdown').dropdown(); </script> </center> </body> </html> Output: Example 2: HTML <!DOCTYPE html> <html> <head> <title>Semantic-UI Dropdown Loading State</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <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> </head> <body> <center> <div class="ui container"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Semantic-UI Dropdown Loading State</h3> <div class="ui loading fluid multiple search selection dropdown"> <input type="hidden" name="country" value="kp"> <i class="dropdown icon"></i> <input class="search"> <div class="default text"> Search company name... </div> <div class="menu"> <div class="item">GeeksforGeeks</div> <div class="item">Amazon</div> <div class="item">Apple</div> <div class="item">Flipkart</div> </div> </div> </div> <script> $('.ui.dropdown').dropdown(); </script> </center> </body> </html> Output: Reference: https://semantic-ui.com/modules/dropdown.html#loading Comment More infoAdvertise with us Next Article Semantic-UI Icon Loading State K Kanchan_Ray Follow Improve Article Tags : Web Technologies CSS Semantic-UI Semantic-UI Modules Similar Reads Semantic-UI Dropdown Floating Type 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. It o 2 min read 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 Dropdown States 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 dropdown allows a user to select a value from a series of options. Semant 3 min read Semantic-UI Dropdown Error 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 has a bunch of components for user interface design. One of them is “Drop 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 Like