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.
Los estados del cargador de interfaz de usuario semántica se utilizan para representar los diferentes estados de un elemento del cargador. Hay tres tipos de estados de cargador que son: indeterminado, activo y deshabilitado.
Estados del cargador de interfaz de usuario semántica:
- Indeterminado : se utiliza para mostrar el cargador que no está seguro de cuánto tiempo llevará una tarea.
- Activo : Se utiliza para mostrar el cargador que puede estar activo o visible.
- Deshabilitado : se utiliza para representar el cargador que se puede deshabilitar u ocultar.
Sintaxis:
<div class="ui segment">
<div class="ui active dimmer">
<div class="ui Loader-States text loader">
...
</div>
</div>
</div>
Ejemplo 1: En este ejemplo, describiremos el estado indeterminado de un elemento cargador.
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:
Estados del cargador de interfaz de usuario semántica
Ejemplo 2: En este ejemplo, describiremos el estado activo de un elemento cargador.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Loader active 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 active States</h3>
<div class="ui segment">
<div class="ui active loader"></div>
</div>
</div>
</body>
</html>
Producción:
Estados del cargador de interfaz de usuario semántica
Ejemplo 3: En este ejemplo, describiremos el estado deshabilitado de un elemento cargador.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Loader disabled 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 disabled States</h3>
<div class="ui segment">
<div class="ui disabled loader"></div>
</div>
</div>
</body>
</html>
Producción:
Estados del cargador de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/loader.html
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA