Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
Un progreso de la interfaz de usuario semántica permite a un usuario mostrar la progresión de una tarea. Semantic UI Progress nos ofrece 2 tipos, 3 contenidos, 5 estados y 5 variaciones.
En este artículo, aprenderemos sobre el tipo indicador. El tipo de indicador de progreso de la interfaz de usuario semántica se utiliza para crear una barra indicadora de progreso que indica visualmente el nivel actual de progreso de la tarea especificada.
Progreso de la interfaz de usuario semántica que indica la clase de tipo:
- indicando: esta clase se utiliza para crear una barra indicadora de progreso que indica visualmente el nivel actual de progreso de la tarea especificada.
Sintaxis:
<div class="ui indicating progress">
<div class="bar">...</div>
<div class="label">...</div>
</div>
Ejemplo 1: El siguiente ejemplo ilustra el tipo de indicación de progreso de la interfaz de usuario semántica.
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>
<center>
<h1 class="ui green header">Geeksforgeeks</h1>
<strong>
Semantic-UI Progress Indicating Type
</strong>
</center>
<div class="ui container">
<div class="ui progress" data-value="5" id="eg">
<div class="ui indicating progress">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Progressing</div>
</div>
</div>
</div>
<script>
$('#eg').progress();
</script>
</body>
</html>
Producción:
Tipo de indicación de progreso de interfaz de usuario semántica
Ejemplo 2: El siguiente código demuestra la clase de progreso indicador con los atributos de valor de datos y total de datos y el parámetro de incremento .
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>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>
Semantic-UI Progress Indicating Type
</strong>
</center>
<div class="ui container">
<div class="ui progress" data-value="0" data-total="30">
<div class="ui indicating progress">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Progressing</div>
</div>
</div>
<div class="ui button">Increase</div>
</div>
<script>
$('.ui.button').on('click', function () {
$('.progress').progress('increment');
});
</script>
</body>
</html>
Producción:
Tipo de indicación de progreso de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/progress.html#indicating
Publicación traducida automáticamente
Artículo escrito por Kanchan_Ray y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA