Back to post

Loaders.css is lightweight, easy to use and performance-focused pure CSS loading animation library that creates various types of loading animations. You can easily edit or modify the color of animation elements through CSS.

Features:

Install with NPM

$ npm i --save loaders.css

Install with Bower

$ bower install loaders.css

How to use it:

1. Include the CSS loaders.min.css in the header of the page.

<link rel="stylesheet" href="path/to/loaders.min.css">

2. Add the basic HTML to the page.

<div class="loader">
  <div class="loader-inner ball-pulse">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

*** ball-pulse is the name of the loading animation, there are many types of predefined loading animations and you can use them accordingly as you need. The <div></div> structure is not the same for all loading animation, it will change as per the name of the animation, you can find details structure in "Demo" page.

Changing the background color

Add styles to the correct child div elements

.ball-grid-pulse > div {
  background-color: orange;
}

Changing the loader size

Use a 2D Scale transform

.loader-small .loader-inner {
  transform: scale(0.5, 0.5);
}

Name of the Animations:

ball-pulse, ball-grid-pulse, ball-clip-rotate, ball-clip-rotate-pulse, square-spin, ball-clip-rotate-multiple, ball-pulse-rise, ball-rotate, cube-transition, ball-zig-zag, ball-zig-zag-deflect, ball-triangle-path, ball-scale, line-scale, line-scale-party, ball-scale-multiple, ball-pulse-sync, ball-beat, line-scale-pulse-out, line-scale-pulse-out-rapid, ball-scale-ripple, ball-scale-ripple-multiple, ball-spin-fade-loader, line-spin-fade-loader, triangle-skew-spin, pacman, semi-circle-spin, ball-grid-beat, ball-scale-random

ball-pulse

<div class="loader">
  <div class="loader-inner ball-pulse">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

ball-grid-pulse

<div class="loader">
  <div class="loader-inner ball-grid-pulse">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

ball-clip-rotate

<div class="loader">
  <div class="loader-inner ball-clip-rotate">
    <div></div>
  </div>
</div>

ball-clip-rotate-pulse

<div class="loader">
  <div class="loader-inner ball-clip-rotate-pulse">
    <div></div>
    <div></div>
  </div>
</div>

square-spin

<div class="loader">
  <div class="loader-inner square-spin">
    <div></div>
  </div>
</div>

ball-clip-rotate-multiple

<div class="loader">
  <div class="loader-inner ball-clip-rotate-multiple">
    <div></div>
    <div></div>
  </div>
</div>

ball-pulse-rise

<div class="loader">
  <div class="loader-inner ball-pulse-rise">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

ball-rotate

<div class="loader">
  <div class="loader-inner ball-rotate">
    <div></div>
  </div>
</div>

cube-transition

<div class="loader">
  <div class="loader-inner cube-transition">
    <div></div>
    <div></div>
  </div>
</div>

ball-zig-zag

<div class="loader">
  <div class="loader-inner ball-zig-zag">
    <div></div>
    <div></div>
  </div>
</div>

ball-zig-zag-deflect

<div class="loader">
  <div class="loader-inner ball-zig-zag-deflect">
    <div></div>
    <div></div>
  </div>
</div>

ball-triangle-path

<div class="loader">
  <div class="loader-inner ball-triangle-path">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

ball-scale

<div class="loader">
  <div class="loader-inner ball-scale">
    <div></div>
  </div>
</div>

line-scale

<div class="loader">
  <div class="loader-inner line-scale">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

line-scale-party

<div class="loader">
  <div class="loader-inner line-scale-party">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

ball-scale-multiple

<div class="loader">
  <div class="loader-inner ball-scale-multiple">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

ball-pulse-sync

<div class="loader">
  <div class="loader-inner ball-pulse-sync">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

ball-beat

<div class="loader">
  <div class="loader-inner ball-beat">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

line-scale-pulse-out

<div class="loader">
  <div class="loader-inner line-scale-pulse-out">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

line-scale-pulse-out-rapid

<div class="loader">
  <div class="loader-inner line-scale-pulse-out-rapid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

ball-scale-ripple

<div class="loader">
  <div class="loader-inner ball-scale-ripple">
    <div></div>
  </div>
</div>

ball-scale-ripple-multiple

<div class="loader">
  <div class="loader-inner ball-scale-ripple-multiple">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

ball-spin-fade-loader

<div class="loader">
  <div class="loader-inner ball-spin-fade-loader">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

line-spin-fade-loader

<div class="loader">
  <div class="loader-inner line-spin-fade-loader">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

triangle-skew-spin

<div class="loader">
  <div class="loader-inner triangle-skew-spin">
    <div></div>
  </div>
</div>

pacman

<div class="loader">
  <div class="loader-inner pacman">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

semi-circle-spin

<div class="loader">
  <div class="loader-inner semi-circle-spin">
    <div></div>
  </div>
</div>

ball-grid-beat

<div class="loader">
  <div class="loader-inner ball-grid-beat">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

ball-scale-random

<div class="loader">
  <div class="loader-inner ball-scale-random">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>