Semantic UI es un marco de código abierto que tiene algunas clases predefinidas para hacer que nuestro sitio web se vea hermoso y receptivo. Es similar a bootstrap ya que tiene clases predefinidas para su uso. Usó CSS y jQuery para construir la interfaz. Tiene algunos tipos diferentes de elementos que nos ayudan a crear un hermoso sitio web.
Las barras de progreso se usan para mostrar la cantidad de trabajo completado del trabajo total. Se usa para mostrar la progresión de una tarea usando las barras. Los tipos de progreso de la interfaz de usuario semántica se utilizan para mostrar el progreso mediante diferentes tipos de barras de progreso.
En este artículo, discutiremos los tipos de progreso de la interfaz de usuario semántica.
Tipos de progreso de la interfaz de usuario semántica:
- Estándar : Es la barra de progreso estándar.
- Indicando : Es la barra de progreso que indica visualmente.
Sintaxis:
<div class="ui indicating progress">
<div class="bar">
....
</div>
...
</div>
Ejemplo 1: el siguiente código demuestra el tipo de progreso estándar de interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Progress Types</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>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>
Semantic-UI Progress Types
</h3>
</div>
<div class="ui progress">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">
Standard Progress
</div>
</div>
<div class="ui button btn1">-</div>
<div class="ui button btn2">+</div>
<script>
$('.ui.button.btn1').on('click', function () {
$('.progress').progress('decrement');
});
$('.ui.button.btn2').on('click', function () {
$('.progress').progress('increment');
});
</script>
</body>
</html>
Producción:
Ejemplo 2: el siguiente código demuestra el tipo de progreso que indica la interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Progress Types</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>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3> Semantic-UI Progress Types </h3>
</div>
<div class="ui indicating progress">
<div class="bar"></div>
<div class="label">
Indicating Progress
</div>
</div>
<div class="ui button btn1">-</div>
<div class="ui button btn2">+</div>
<script>
$('.ui.button.btn1').on('click', function () {
$('.progress').progress('decrement');
});
$('.ui.button.btn2').on('click', function () {
$('.progress').progress('increment');
});
</script>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/modules/progress.html
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA