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.
Las barras de progreso indican el progreso del trabajo realizado del trabajo total. Indica visualmente la cantidad de trabajo realizado con las barras. En este artículo, aprenderemos sobre el tipo estándar de progreso. Este tipo estándar indica el progreso del trabajo en la barra de progreso.
Clases de tipo estándar de progreso de interfaz de usuario semántica:
- progreso: Esta clase se utiliza para indicar el progreso del trabajo.
- indicando: Esta clase se utiliza para indicar el nivel actual de progreso de cualquier trabajo.
Sintaxis:
<div class="ui progress">
<div class="bar">
<div class="progress">...</div>
</div>
</div>
Ejemplo 1: a continuación se muestra el código que demuestra el tipo estándar de progreso.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Progress Standard Type
</title>
<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 style="margin-inline: 10rem;">
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>
Semantic-UI Progress Standard Type
</strong>
</center>
<div class="ui progress">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Uploading Files</div>
</div>
<div class="ui button green">Increase</div>
<div class="ui button red">Decrease</div>
<script>
$('.ui.button.green').on('click', function () {
$('.progress').progress('increment');
});
$('.ui.button.red').on('click', function () {
$('.progress').progress('decrement');
});
</script>
</body>
</html>
Producción:
Tipo estándar de progreso de interfaz de usuario semántica
Ejemplo 2: a continuación se muestra el código que demuestra el tipo estándar de progreso utilizando la clase indicadora .
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Progress Standard Type
</title>
<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 style="margin-inline: 10rem;">
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>
Semantic-UI Progress Standard Type
</strong>
</center>
<div class="ui indicating progress">
<div class="bar"></div>
<div class="label">Progressing...</div>
</div>
<div class="ui button green">Increase</div>
<div class="ui button red">Decrease</div>
<script>
$('.ui.button.green').on('click', function () {
$('.progress').progress('increment');
});
$('.ui.button.red').on('click', function () {
$('.progress').progress('decrement');
});
</script>
</body>
</html>
Producción:
Tipo estándar de progreso de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/modules/progress.html#standard
Publicación traducida automáticamente
Artículo escrito por yourcontactformsubmitted y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA