Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like Bootstrap.
The Progress module indicates the progress of the work done out of the total work. It visually indicates the amount of work done using the bars. In semantic-UI, the progress bars come with a good interface and with different amazing classes. In this article, we will see about the Progress Warning State in Semantic-UI.
Semantic UI Progress Warning State Class:
- warning: It indicates a warning by yellow color indication.
Syntax:
<div class="ui warning progress">
<div class="bar">
<div class="progress"></div>
</div>
</div>Example 1: The following code demonstrates the progress bar of the warning state in Semantic-UI.
<!DOCTYPE html> <html>
<head>
<title>Semantic-UI Progress Warning State</title>
<link href=
rel="stylesheet" />
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<strong>
Semantic-UI Progress Warning State
</strong>
<br />
</center>
<div class="ui container">
<div class="ui warning progress">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">
Malware detected in some files
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: The following example demonstrates the progress bar of the warning state in Semantic-UI.
<!DOCTYPE html> <html>
<head>
<title>Semantic-UI Progress Warning State</title>
<link href=
rel="stylesheet" />
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<strong>
Semantic-UI Progress Warning State
</strong>
<br />
</center>
<div class="ui container">
<div class="ui warning progress" data-value="100" data-total="100" id='eg'>
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">
Warning : Disk space is getting less
</div>
</div>
</div>
<script>
$('#eg').progress()
</script>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/modules/progress#warning