Semantic UI es un marco de desarrollo de código abierto que proporciona clases predefinidas para hacer que nuestro sitio web se vea hermoso, sorprendente y receptivo. Es similar a Bootstrap que tiene clases predefinidas. Utiliza jQuery y CSS para crear las interfaces. También se puede usar directamente a través de CDN como Bootstrap.
El módulo Progreso indica el progreso del trabajo realizado del trabajo total. Indica visualmente la cantidad de trabajo realizado con las barras. En la interfaz de usuario semántica, las barras de progreso vienen con una buena interfaz y con diferentes clases sorprendentes. En este artículo, veremos sobre el estado de advertencia de progreso en la interfaz de usuario semántica.
Clase de estado de advertencia de progreso de IU semántica:
- advertencia: Indica una advertencia mediante la indicación de color amarillo.
Sintaxis:
<div class="ui warning progress">
<div class="bar">
<div class="progress"></div>
</div>
</div>
Ejemplo 1: el siguiente código muestra la barra de progreso del estado de advertencia en Semantic-UI.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Progress Warning State</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </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>
Producción:
Ejemplo 2: El siguiente ejemplo muestra la barra de progreso del estado de advertencia en Semantic-UI.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Progress Warning State</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</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>
Salida :
Referencia: https://semantic-ui.com/modules/progress#warning
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA