La interfaz de usuario semántica es un marco de interfaz de usuario de código abierto que utiliza CSS y jQuery para crear excelentes experiencias web. También es compatible con otros frameworks CSS como Bootstrap.
Un módulo de Progreso se utiliza para mostrar el progreso de una tarea al usuario. En este artículo, veremos los diferentes estados del módulo de progreso en la interfaz de usuario semántica. Los estados de progreso de la interfaz de usuario semántica nos ofrecen muchos estados, todos los estados se mencionan y describen a continuación.
Estados de progreso de la interfaz de usuario semántica:
- activo : esta clase se usa en el módulo de progreso para establecer su estado en activo.
- éxito : esta clase se usa en el módulo de progreso para establecer su estado en éxito.
- advertencia : esta clase se usa en el módulo de progreso para establecer su estado en advertencia.
- error : esta clase se usa en el módulo de progreso para establecer su estado en error.
- disabled : esta clase se usa en el módulo de progreso para establecer su estado en disabled.
Sintaxis:
<div class="ui Progress-States progress">
....
</div>
Ejemplo 1: El siguiente ejemplo muestra el uso de las clases de estado de progreso para cambiar el estado de una barra de progreso.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI - Progress States</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>
<style>
.ui.container {
text-align: center;
}
h3 {
margin-top: 0px;
}
.ui.progress {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>Semantic UI - Progress States</strong>
</div>
<div class="ui active progress"
data-value="25"
data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Progress - Active State</div>
</div>
<div class="ui progress success"
data-value="100"
data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Progress - Success State</div>
</div>
<div class="ui warning progress"
data-value="100"
data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Progress - Warning State</div>
</div>
<div class="ui error progress"
data-value="100"
data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Progress - Error State</div>
</div>
<div class="ui disabled progress"
data-value="100"
data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Progress - Disabled State</div>
</div>
</div>
<script>
$(".ui.progress").progress();
</script>
</body>
</html>
Producción:
Estados de progreso de la interfaz de usuario semántica
Ejemplo 2: el siguiente ejemplo muestra el uso de estados de progreso en la interfaz de usuario semántica con diferentes tamaños de la barra de progreso.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI - Progress States</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>
<style>
.ui.container {
text-align: center;
padding: 10%;
}
h3 {
margin-top: 0px;
}
.ui.progress {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>Semantic UI - Progress States</strong>
</div>
<!-- Active & Tiny Progress Bar -->
<div class="ui active progress tiny"
data-value="25" data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">
Progress - Active State and Tiny Sized
</div>
</div>
<!-- Success & Small Progress Bar -->
<div class="ui progress success small"
data-value="100" data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">
Progress - Success State and Small Sized
</div>
</div>
<!-- Warning & Normal Sized Progress Bar -->
<div class="ui warning progress"
data-value="100" data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">
Progress - Warning State and Normal Sized
</div>
</div>
<!-- Error & Large Progress Bar -->
<div class="ui error progress large"
data-value="100" data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">
Progress - Error State and Large Sized
</div>
</div>
<!-- Disabled & Big Progress Bar -->
<div class="ui disabled progress big"
data-value="100" data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">
Progress - Disabled State and Big Sized
</div>
</div>
</div>
<script>
$(".ui.progress").progress();
</script>
</body>
</html>
Producción:
Estados de progreso de la interfaz de usuario semántica con variación de tamaño
Enlace de referencia: https://semantic-ui.com/modules/progress.html#active