Loaders

A page loader is an animation a visitor sees while the page or an element is loaded. During this time a page is blocked with overlay.

Default loader markup

  
  <div id="example1" class="loader" data-text="Please wait..." style="display: none;">
  </div>
  
  

.loader {
    .lib-loader();
}

Default loader variables

    
Mixin variable Global variable Default value Allowed values Comment
@_loader-overlay-background-color @loader-overlay__background-color rgba(255, 255, 255, .5) '' | false | value Loader overlay background color
@_loader-overlay-z-index @loader-overlay__z-index 9999 '' | false | value Loader overlay background z-index
@_loader-icon-width @loader-icon__width 160px '' | false | value Loader icon width
@_loader-icon-height @loader-icon__height 160px '' | false | value Loader icon height
@_loader-icon-background-color @loader-icon__background-color transparent '' | false | value Loader icon background color
@_loader-icon-background-image @loader-icon__background-image url('@{baseDir}images/loader-2.gif') '' | false | value Loader icon ackground image
@_loader-icon-background-position @loader-icon__background-position 50% 50% '' | false | value Loader icon background position
@_loader-icon-border-radius @loader-icon__border-radius 5px '' | false | value Loader icon border radius
@_loader-icon-padding @loader-icon__padding '' '' | false | value Loader icon icon padding
@_loader-text @loader-text false '' | false | value Loader text presence
@_loader-text-color @loader-text__color @primary__color '' | false | value Loader text color
@_loader-text-font-size @loader-text__font-size @font-size__base '' | false | value Loader text font size
@_loader-text-font-family @loader-text__font-family @font-family__base '' | false | value Loader text font family
@_loader-text-font-weight @loader-text__font-weight @font-weight__regular '' | false | value Loader text font weight
@_loader-text-font-style @loader-text__font-style @font-style__base '' | false | value Loader text font style
@_loader-text-padding @loader-text__padding 130px 0 0 '' | false | value Loader text padding

Loading

Loading is an animation a visitor sees while a certain block is loaded. In this case only this block is locked by an overlay, not the whole page.

.loading {
    .lib-loading();
}

Loading default variables

    
Mixin variable Global variable Default value Allowed values Comment
@_loading-background-color @loading__background-color @loader-overlay__background-color '' | false | value Loading overlay background color
@_loading-background-image @loading__background-image @loader-icon__background-image '' | false | value Loading overlay background z-index