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. La variación invertida del cargador de interfaz de usuario semántica se utiliza para invertir el color del elemento del cargador.
Clase de variación invertida del cargador:
- invertido: Esta clase se utiliza para mostrar los cargadores con sus colores invertidos.
Sintaxis:
<div class="ui inverted segment">
<div class="ui active inverted loader"></div>
...
</div>
...
</div>
Ejemplo 1: En este ejemplo, describiremos la variación invertida del cargador.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Loader Inverted Variation
</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 Variation</h3>
</div>
<div class="ui container">
<div class="ui inverted segment">
<div class="ui active inverted loader"></div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, describiremos la variación invertida del cargador.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Loader Inverted Variation
</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<style>
.ui.inverted.segment {
padding: 60px 0;
}
</style>
</head>
<body>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Loader Inverted Variation</h3>
</div>
<div class="ui container">
<div class="ui inverted 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#inverted
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA