Bulma Loader
In this article, we’ll see about Loader in Bulma. For creating a loader, Bulma uses Sass mixins that are available for us to create the customer CSS outputs. The loader() is a mixin that creates a spinner in the form circle. For making the loader, we have to use some CSS for making a better output in Bulma.
Pre-requisites: CSS preprocessor SASS
Bulma Loader Class: For now there is no specific class used by Bulma for creating a loader rather it uses SASS mixins for creating a loader for output like the CSS.
Syntax:
<span class="loader-mixin"></span>
.loader-mixin {
@include loader;
}
Note: The below output can be shown only if you know how to run SASS mixins as a CSS file (as SASS doesn’t work in browsers). So, do check out the pre-requisite given above to know all about CSS preprocessors.
Example: Below example illustrate the loader in 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= <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(); } |
Output:
Please Login to comment...