Submit your widget

Performance-focused pure css loading animations

Created 2 years ago   Views 9401   downloads 2272    Author ConnorAtherton
Performance-focused pure css loading animations
View DemoDownload 38.1 KB
25
Share |

Delightful and performance-focused pure css loading animations.

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-dev 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, 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
  • To initialise loaders that are added after page load select the div and call loaders on them (e.g. $('.loader-inner').loaders())
  • Enjoy

Read more:https://github.com/ConnorAtherton/loaders.css