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"></div>

Inverse

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

<div class="loader loader--inverse"></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-solid">

  <div class="loader loader--button"></div>
</a>
<a class="button is-outline">
  <div class="loader loader--button"></div>
</a>
<a class="button is-danger">
  <div class="loader loader--button"></div>
</a>
 

Variables

You can use these variables to change the visual appearence when creating your own Denali themes in SCSS.