Delightful and performance-focused pure css loading animations.
What is this?
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.
I've posted links below to some fantastic articles that go into this
in a lot more detail.
Install
bower install loaders.css
npm i --save loaders.css
Usage
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, andloaders.css.js - Create an element and add the animation class (e.g.
<div class="loader-inner ball-pulse"></div>) loaders.jsis a simple helper to inject the correct number of div elements for each animation- To initialise loaders that are added after page load select the div and call
loaderson them (e.g.$('.loader-inner').loaders()) - Enjoy
Customising
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);
}
Browser support
Check the can I use tables.
All recent versions of the major browsers are supported and it has support back to IE9.
Note: The loaders aren't run through autoprefixer, see this issue.
IE 11