Bulma Loader
Last Updated :
15 Feb, 2022
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
@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:
Share your thoughts in the comments
Please Login to comment...