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 interfaces interactivas. También se puede usar directamente a través de CDN como bootstrap.
El estado indeterminado del cargador de interfaz de usuario semántica se usa para mostrar el cargador que no está seguro de cuánto tiempo llevará una tarea.
Clase usada:
- indeterminado: esta clase se usa para mostrar el cargador para estados indeterminados.
Sintaxis:
<div class="ui segment">
<div class="ui active dimmer">
<div class="ui indeterminate text loader">
Text...
</div>
</div>
</div>
Ejemplo 1: Este ejemplo describe el estado indeterminado de una tarea.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Loader Indeterminate States
</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<style>
.ui.active.dimmer {
padding: 50px 0;
}
</style>
</head>
<body>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Loader Indeterminate States</h3>
<div class="ui segment">
<div class="ui active dimmer">
<div class="ui indeterminate text loader">
GeeksforGeeks Loading...
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo describe el estado indeterminado invertido de una tarea.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Loader Indeterminate States
</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<style>
.ui.segment {
padding: 50px 0;
}
</style>
</head>
<body>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Loader Indeterminate States</h3>
<div class="ui segment">
<div class="ui active inverted dimmer">
<div class="ui indeterminate text loader">
GeeksforGeeks Loading...
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/elements/loader.html#indeterminate
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA