Delightful And Performance-focused Pure CSS Loading Animations – Loaders.css

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:

• It can be installed with NPM and Bower.
• Easy to implement and lightweight.
• Made with pure CSS.
• Supports on all major browsers.

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