En este artículo, veremos sobre Loader en Bulma. Para crear un cargador, Bulma usa mixins Sass que están disponibles para nosotros para crear las salidas CSS del cliente. El loader() es un mixin que crea un spinner en el círculo del formulario. Para hacer el cargador, tenemos que usar algo de CSS para hacer una mejor salida en Bulma.
Requisitos previos: preprocesador CSS SASS
Clase de cargador de Bulma: por ahora, Bulma no usa una clase específica para crear un cargador, sino que usa mixins SASS para crear un cargador para salida como el CSS.
Sintaxis:
<span class="loader-mixin"></span>
.loader-mixin {
@include loader;
}
Nota: El siguiente resultado solo se puede mostrar si sabe cómo ejecutar SASS mixins como un archivo CSS (ya que SASS no funciona en los navegadores). Por lo tanto, consulte el requisito previo dado anteriormente para saber todo sobre los preprocesadores CSS.
Ejemplo: El siguiente ejemplo ilustra el cargador en Bulma.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GFG</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> <link rel="stylesheet" href="demo.css"> </head> <body> <div class="container content"> <h1>Bulma Loader</h1> <span class="loader-mixin"></span> </div> </body> </html>
CSS
/* Bulma uses SASS mixins for creating CSS outputs */
@mixin loader() {
animation: spinAround .5s infinite linear;
border: 2px solid #dbdbdb;
border-radius: 9999px;
border-right-color: transparent;
border-top-color: transparent;
display: block;
height: 1em;
position: relative;
width: 1em;
}
.loader-mixin {
@include loader();
}
Producción:
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA