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 la interfaz de usuario semántica, las barras de progreso vienen con una buena interfaz y con diferentes clases sorprendentes. En este artículo, veamos sobre el estado activo de progreso.
Semántica UI Progreso estado activo clase utilizada:
- activo: Indica que el progreso del trabajo actual está activo a través de la animación.
Sintaxis:
<div class="ui active progress" data-percent="..">
<div class="bar">
<div class="progress"></div>
</div>
</div>
Ejemplo 1: el siguiente código muestra la barra de progreso del estado activo.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet"/>
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js" integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</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 Active State
</strong><br/><br/>
</center>
<div class="ui container">
<div class="ui active progress" data-percent="58" 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:
Ejemplo 2: el siguiente código muestra la barra de progreso del estado activo con jQuery.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet"/>
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js" integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</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 Active State
</strong>
<br />
<br />
</center>
<div class="ui container">
<div class="ui active progress" data-value="0"
data-total="10" id="eg">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">
Transferring files
</div>
</div>
<div class="ui button">
Transfer
</div>
</div>
<script>
$('.ui.button').on('click', function () {
$('.progress').progress('increment');
});
</script>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/modules/progress.html#active
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA