Semantic-UI Segment 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 provides us with a very easy way to style the web app instead of using CSS. To create a grouping of content that is related, we use segments. It offers segments in different variations, type groups, and states.
In this article, we will learn about the Semantic-UI Segment States along with implementation using the example code.
Semantic-UI Segment States: Semantic-UI provides us ways to create a grouping of related content in two states which are as follows:
1. Disabled: The segment which is used to group related content shows its content in the disabled state. We can observe the content in the segment in the lighter version than usual.
<div class="ui disabled segment"> ... </div>
2.Loading: The segment which is used to group related content shows its content in the loading state . We can observe a loader and the content cannot be seen .
<div class="ui loading segment"> ... </div>
Output: We can observe that the content cannot be seen and a loader is shown instead.