Denali CSS Docs are Moving

We've updated our documenation to align with our other frameworks. Our new documenation will live here and these pages will be removed.

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>

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 in a override.css file to customize this component.

Variable Name CSS Property
$loader-color background-color
$loader-color-inverse background-color