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.
La variación de tamaño del cargador de interfaz de usuario semántica se utiliza para mostrar los cargadores en diferentes tamaños.
Clases usadas:
- 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.
Sintaxis:
div class="ui segment">
<div class="ui active dimmer">
<div class="ui loader_size text loader">Loading</div>
</div>
</div>
Ejemplo 1: En este ejemplo, describiremos los usos de las variaciones de 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 2: En este ejemplo, describiremos los usos de las variaciones de 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 mini loader"></div>
</div>
<div class="ui segment">
<div class="ui active tiny loader"></div>
</div>
<div class="ui segment">
<div class="ui active small loader"></div>
</div>
<div class="ui segment">
<div class="ui active medium loader"></div>
</div>
<div class="ui segment">
<div class="ui active large loader"></div>
</div>
<div class="ui segment">
<div class="ui active big loader"></div>
</div>
<div class="ui segment">
<div class="ui active huge loader"></div>
</div>
<div class="ui segment">
<div class="ui active massive loader"></div>
</div>
<div class="height"></div>
</div>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/elements/loader.html#size
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA