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.
Las variaciones del cargador de interfaz de usuario semántica se utilizan para representar la apariencia del elemento del cargador. Hay cuatro tipos de variaciones de cargador: en línea, centro en línea, tamaño e invertido.
Variaciones del cargador:
- En línea : se utiliza para mostrar el elemento cargador con contenido en línea.
- Centro en línea : se utiliza para colocar el cargador en el centro en línea.
- Tamaño : Se utiliza para mostrar los cargadores en diferentes tamaños.
- Invertido : Se utiliza para mostrar los cargadores con sus colores invertidos.
Clases usadas:
- Clase de variación en línea del cargador:
- en línea: esta clase se usa para colocar el cargador con contenido en línea.
- Clase de variación del centro en línea del cargador:
- centrado en línea: esta clase se utiliza para colocar el cargador en el centro en línea.
- Clases de variación de tamaño del cargador:
- mini: esta clase se utiliza para mostrar el cargador de tamaño mini.
- tiny: Esta clase se utiliza para mostrar el cargador de tamaño minúsculo.
- small: esta clase se utiliza para mostrar el cargador de tamaño pequeño.
- medium: Esta clase se utiliza para mostrar el cargador de tamaño medio.
- grande: esta clase se utiliza para mostrar el cargador de gran tamaño.
- big: esta clase se utiliza para mostrar el cargador de gran tamaño.
- enorme: esta clase se utiliza para mostrar el cargador de gran tamaño.
- masivo: esta clase se utiliza para mostrar el cargador de tamaño masivo.
- Clases de variación invertida del cargador:
- invertido: Esta clase se utiliza para mostrar los cargadores con sus colores invertidos.
Sintaxis:
<div class="ui active variation_class loader"></div>
Ejemplo 1: En este ejemplo, describiremos la variación Inline del cargador.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Loader Inline Variations
</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 Inline Variations</h3>
</div>
<div class="ui container">
<div class="ui segment">
<div class="ui active inline loader"></div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, describiremos la variación del centro en línea.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Loader Inline Center Variations
</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 Inline Center Variations</h3>
</div>
<div class="ui container">
<div class="ui segment">
<div class="ui active inline centered loader"></div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 3: En este ejemplo, describiremos la variación del tamaño del cargador.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Loader Size Variations
</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<style>
.ui.segment {
padding: 60px 0;
}
.height {
height: 250px;
}
</style>
</head>
<body>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Loader Size Variations</h3>
</div>
<div class="ui container">
<div class="ui segment">
<div class="ui active dimmer">
<div class="ui mini text loader">
GeeksforGeeks Mini Size Loading...
</div>
</div>
</div>
<div class="ui segment">
<div class="ui active dimmer">
<div class="ui tiny text loader">
GeeksforGeeks Tiny Size Loading...
</div>
</div>
</div>
<div class="ui segment">
<div class="ui active dimmer">
<div class="ui small text loader">
GeeksforGeeks Small Size Loading...
</div>
</div>
</div>
<div class="ui segment">
<div class="ui active dimmer">
<div class="ui medium text loader">
GeeksforGeeks Medium Size Loading...
</div>
</div>
</div>
<div class="ui segment">
<div class="ui active dimmer">
<div class="ui large text loader">
GeeksforGeeks Large Size Loading...
</div>
</div>
</div>
<div class="ui segment">
<div class="ui active dimmer">
<div class="ui big text loader">
GeeksforGeeks Big Size Loading...
</div>
</div>
</div>
<div class="ui segment">
<div class="ui active dimmer">
<div class="ui huge text loader">
GeeksforGeeks Huge Size Loading...
</div>
</div>
</div>
<div class="ui segment">
<div class="ui active dimmer">
<div class="ui massive text loader">
GeeksforGeeks Massive Size Loading...
</div>
</div>
</div>
<div class="height"></div>
</div>
</body>
</html>
Producción:
Ejemplo 4: En este ejemplo, describiremos la Variación Invertida del Cargador.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Loader Inverted Variations
</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<style>
.ui.segment {
padding: 60px 0;
}
</style>
</head>
<body>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Loader Inverted Variations</h3>
</div>
<div class="ui container">
<div class="ui segment">
<div class="ui active inverted dimmer">
<div class="ui text loader">
GeeksforGeeks Loading...
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
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