Semantic-UI Search 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. 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.
HTML
<!DOCTYPE html> <html> <head> <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> <div class="ui dimmed pusher container"> <h2 class="ui green header">w3wiki</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 w3wiki"> <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
HTML
<!DOCTYPE html> <html> <head> <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> <div class="ui dimmed pusher container"> <h2 class="ui green header">w3wiki</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 w3wiki"> <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