Simple loader with Bulma

Using Loaders

Using loaders is quite a common thing when you have to build websites and applications. They a re a great help in making users wait while the page content is still loading, often represented by a spinning shape. Sometimes, it can take time to build a nice loader that will adapt to any situation. But Bulma can still save you from wasting that time.

Taking advantage of a Bulma class

Bulma natively exposes a css class used for buttons and and form controls, when they need to show a loading state. This class is straightly named .is-loading . We are going to use it to create a custom loader.

Markup and styles

Let's begin with the html markup we are going to need for our custom Loader.

<div class="section">
  <div class="container">
    <div class="columns">
      <div class="column is-6 is-offset-3">
        <div class="box">
          <!-- The loader will be here -->
          <h2 class="title is-2">This is a Loading Box</h2>
          <div class="has-text-centered">
            <a class="button is-big">Call Loader</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

We are simply using a Bulma .box element to create a box that provides a text and a button to activate the loader.

Creating the loader

Our loader will take the form of an overlay that will cover the box when active. It will also display a spinner. Let's start with the loader Html markup :

<div class="loader-wrapper">
  <div class="loader is-loading"></div>
</div>

For our loader to cover the box, we need to position it absolutely, inside the box, which is relatively positionned.

.loader-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #fff;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;

  .loader {
    height: 80px;
    width: 80px;
  }

  &.is-active {
    opacity: 1;
    z-index: 1;
  }
}

Notice that we give a default opacity of 0 to the .loader-wrapper element. This way, it stays hidden when not active. Notice also the z-index used between the two different states. If z-index doesn't fit in your own scenario, you could imagine replacing it with the pointer-events property.

Also, we use flexbox on the wrapper to make sure that the .loader element is perfectly centered, both vertically and horizontally. We give that same element a width and height, because this will be determining the size of our spinner.

We added the .is-loading Bulma class we talked about before, so that the loader div continuously displays a spinner. Of course, we cannot see it when the parent wrapper element is not active (opacity: 0;).

That is all the markup and styles we will need to make our loader work. Let's dive into the javascript.

Javascript

Since we are not actually loading anything, we need to fake the loading process using a javascript setTimeout function.

$(document).ready(() => {
  $('.button').on('click', () => {
    $('.loader-wrapper').addClass('is-active')
    setTimeout(() => {
      $('.loader-wrapper').removeClass('is-active')
    }, 3000)
  })
})

This is really straightforward, we just tell the browser to add the .is-active class to the loader-wrapper element and to remove it after 3 seconds, faking the loading process. Tada, that's all, our loader is ready to go.

Epilogue

In this post, we saw how to create a Bulma loader using CSS and some very light jQuery. If you want to share your thoughts or ask a question, give it a shot in the comments section. I hope you enjoyed this little session as much as i did writing it and to see you again soon on Css Ninja.