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 Default value Allowable values Comment
@_loader-overlay-background-color rgba(255, 255, 255, .5) '' | false | value Loader overlay background color
@_loader-overlay-z-index 9999 '' | false | value Loader overlay background z-index
@_loader-icon-width 160px '' | false | value Loader icon width
@_loader-icon-height 160px '' | false | value Loader icon height
@_loader-icon-background-color transparent '' | false | value Loader icon background color
@_loader-icon-background-image url('@{baseDir}images/loader-2.gif') '' | false | value Loader icon ackground image
@_loader-icon-background-position 50% 50% '' | false | value Loader icon background position
@_loader-icon-border-radius 5px '' | false | value Loader icon border radius
@_loader-icon-padding '' '' | false | value Loader icon icon padding
@_loader-text false '' | false | value Loader text presence
@_loader-text-color @primary__color '' | false | value Loader text color
@_loader-text-font-size @font-size__base '' | false | value Loader text font size
@_loader-text-font-family @font-family__base '' | false | value Loader text font family
@_loader-text-font-weight @font-weight__regular '' | false | value Loader text font weight
@_loader-text-font-style @font-style__base '' | false | value Loader text font style
@_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 Default value Allowable values Comment
@_loading-background-color @loader-overlay__background-color '' | false | value Loading overlay background color
@_loading-background-image @loader-icon__background-image '' | false | value Loading overlay background z-index