Open In App

Bulma Loader

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 15 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads