Skip to content
Related Articles
Get the best out of our app
Open App

Related Articles

Bulma Loader

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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.


<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">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
    <link rel="stylesheet" href="demo.css">
    <div class="container content">
        <h1>Bulma Loader</h1>
        <span class="loader-mixin"></span>


/* 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();


My Personal Notes arrow_drop_up
Last Updated : 15 Feb, 2022
Like Article
Save Article
Similar Reads
Related Tutorials