Delightful and performance-focused pure css loading animations.

Delightful and performance-focused pure css loading animations.

INTRODUCTION

Loader.css - a collection of loading animations written entirely in css. Each animation is limited to a small subset of css properties in order to avoid expensive painting and layout calculations.

beautiful preloader for ajax, busy work

HOW TO USE

Standard
  • Include loaders.min.css
  • Create an element and add the animation class (e.g. <div class="loader-inner ball-pulse"></div>)
  • Insert the appropriate number of <div>s into that element
jQuery (optional)
  • Include loaders.min.css, jQuery, and loaders.css.js
  • Create an element and add the animation class (e.g. <div class="loader-inner ball-pulse"></div>)
  • loaders.js is a simple helper to inject the correct number of div elements for each animation
  • Enjoy

DEMO

See the Pen loader.css by Thanh Nguyen (@genievn) on CodePen.

CUSTOMIZATION

Changing the background color

Add styles to the correct child div elements

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