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.
<!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 >
|
/* Bulma uses SASS mixins for creating CSS outputs */ @mixin loader() { animation: spinAround . 5 s 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: