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. It uses a class to add CSS to the elements.
Search bar allows us to search for content in a website. It is an essential part of a website, which increases the ease of finding the desired item. Semantic UI provides us with a styled search bar. Let’s have a look at Semantic UI Search States.
Semantic UI Search States:
- loading: A Search Bar can be kept in a loading state until the search results are fetched from an external source or from the local content.
Semantic UI Loading Class:
- loading: This class keeps the search bar in a loading state.
Syntax:
<div class="ui loading search">
<div class="ui icon input">
<input type="text">
<i class="search icon"></i>
</div>
</div>Example 1: In the below example, we have created a search bar with loading state.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="ui dimmed pusher container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Search States</h4>
<hr>
<br />
<div class="ui loading search">
<div class="ui icon input">
<input type="text"
placeholder="Find in GeeksforGeeks">
<i class="search icon"></i>
</div>
</div>
</div>
</body>
</html>
|
Output:
Search bar with loading state
Example 2: In the below example, we have created a disable search with loading state
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="ui dimmed pusher container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Search States</h4>
<hr>
<br />
<div class="ui loading disabled search">
<div class="ui icon input">
<input class="prompt" type="text"
placeholder="Find in GeeksforGeeks">
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
</div>
</body>
</html>
|
Output:
Disabled search with loading state
Reference: https://semantic-ui.com/modules/search.html#loading