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 deshabilitado del cargador de IU semántica se usa para representar el cargador que se puede deshabilitar u ocultar.
Clase usada:
- disabled: esta clase se utiliza para representar el estado deshabilitado del widget del cargador.
Sintaxis:
<div class="ui segment">
<div class="ui disabled loader"></div>
</div>
Ejemplo 1: Este ejemplo describe el estado deshabilitado del 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:
Ejemplo 2: Este ejemplo describe el estado deshabilitado del 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 dimmer">
<div class="ui text loader">
GeeksforGeeks Loading...
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/elements/loader.html#disabled
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA