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 de contenido Progreso Progreso . Este tipo de contenido indica el progreso del trabajo en la barra de progreso.
Progreso de la interfaz de usuario semántica Clases de contenido de progreso:
- progreso: Esta clase indica el progreso del trabajo.
Sintaxis:
<div class="ui progress" data-percent="10">
<div class="bar">
<div class="progress">...</div>
</div>
</div>
Ejemplo 1: el código siguiente muestra la barra de progreso del tipo de contenido de 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 Progress Content Type
</strong>
</center>
<div class="ui container">
<div class="ui progress"
data-percent="10"
id="eg">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Transferring files</div>
</div>
</div>
<script>
$('#eg').progress();
</script>
</body>
</html>
Producción:
Progreso de IU semántica Progreso Contenido
Ejemplo 2: el siguiente código muestra la barra de progreso del tipo de contenido de progreso con algo de javascript.
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 Progress Content Type
</strong>
</center>
<div class="ui container">
<div class="ui progress"
data-value="0"
data-total="3"
id="eg">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Transferring files</div>
</div>
<div class="ui button">Upload file-1</div>
<div class="ui button">Upload file-2</div>
<div class="ui button">Upload file-3</div>
</div>
<script>
$('.ui.button').on('click', function () {
$('.progress').progress('increment');
});
</script>
</body>
</html>
Producción:
Progreso de IU semántica Progreso Contenido
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