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 contenido de la etiqueta de progreso . Esto se puede usar para mostrar etiquetas en la barra de progreso.
Clases de contenido de etiqueta de progreso de interfaz de usuario semántica:
- progreso: Esta clase se usa para mostrar un porcentaje dentro de la barra de progreso.
Sintaxis:
<div class="ui progress">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">.....</div>
</div>
Ejemplo 1: el siguiente código muestra la barra de progreso con el contenido de la etiqueta y el progreso.
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 Label content
</strong>
</center>
<div class="ui container">
<div class="ui success progress"
data-value="10"
data-total="10" id='eg'>
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Download Successful!</div>
</div>
</div>
<script>
$('#eg').progress();
</script>
</body>
</html>
Producción:
Ejemplo 2: el siguiente código muestra la barra de progreso con el contenido de la etiqueta y el progreso.
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 Label content
</strong>
</center>
<div class="ui container">
<div class="ui error progress"
data-value="10"
data-total="50"
id='eg'>
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Downloading</div>
</div>
</div>
<script>
$('#eg').progress();
</script>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/modules/progress.html#progress
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA