Loaders

Loaders signify that content is being loaded or up-loaded on a page. They come in a variety of sizes and styles and can be added to buttons.

Implementation

Denali loaders can be implemented three ways: through a class on any element, injecting the svg code directly into an element, or by calling the svg through an <img> tag. Our preferred method is adding the class .loader to a div.

 
<div class="loader is-large"></div>
 

Sizes

Loaders come at a default size of 24px, but can be customized by adding the .is-small, .is-medium, or .is-large classes to the loader <div>.

 
<div class="loader is-extrasmall"></div>
<div class="loader is-small"></div>
<div class="loader is-medium"></div>
<div class="loader is-large"></div>
 

Inverse

Implement an inverse color loader by adding the .is-inverse class to the loader <div>.

 
<div class="loader is-inverse is-large"></div>
 

Button loader

We’ve made it so every button can house a loader. To add a loader to a button start by adding the .has-loader class to your button element. From there you have the option to place the svg code directly inside the button or call the .d-loader class inside the button .

 
<a class="button is-primary has-loader">
  <div class="loader"></div>
</a>
<a class="button is-secondary has-loader">
  <div class="loader"></div>
</a>
<a class="button is-danger has-loader">
  <div class="loader"></div>
</a>
 

Variables

You can use these variables in a override.css file to customize this component.