Semantic-UI Dropdown Loading State
Last Updated :
28 Feb, 2022
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 =
< script src =
</ script >
< script src =
</ 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 =
< script src =
</ script >
< script src =
</ 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
Share your thoughts in the comments
Please Login to comment...