Loading

Loading will be used while a page or component area is being loaded.

content

Demo

Area loading

Please use the .sk-three-bounce-relative class for area loading.

Area loading

Loading content, please wait...

<div class="sk-three-bounce-relative">
  <div class="sk-three-bounce">
    <div class="sk-child sk-bounce1"></div>
    <div class="sk-child sk-bounce2"></div>
    <div class="sk-child sk-bounce3"></div>
  </div>
</div>

All page loading

Please use the.sk-three-bounce-absolute class for full page loading.

<div class="sk-three-bounce-absolute">
  <div class="sk-three-bounce">
    <div class="sk-child sk-bounce1"></div>
    <div class="sk-child sk-bounce2"></div>
    <div class="sk-child sk-bounce3"></div>
  </div>
</div>

Basic Usage

Please avoid duplicating the reference to the same CSS and JS files.

CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/design/web-design-guides/component/css/style.css">

content