Delightful, performance-focused pure css loading animations.

Last update: May 26, 2022

Loaders.css

Delightful and performance-focused pure css loading animations.

What is this?

See the demo

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, 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

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 Firefox 36 Chrome 41 Safari 8

Contributing

Pull requests are welcome! Create another file in src/animations and load it in src/loader.scss.

In a separate tab run gulp --require coffee-script/register. Open demo/demo.html in a browser to see your animation running.

Further research

Inspired by loaders.css

A few other folks have taken loaders and ported them elsewhere.

Licence

The MIT License (MIT)

Copyright (c) 2016 Connor Atherton

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

GitHub

https://github.com/ConnorAtherton/loaders.css
Comments
  • 1. Remove prefixing

    Everyone could/should be using Autoprefixer (or some similar/lesser tool) in their development environment. It's usually a bad practice to have prefixing in libraries.

    Reviewed by corysimmons at 2015-03-31 12:24
  • 2. Created mixins and fixes missing cross-browsers prefixes

    I did some changes as introduce mixins to generate cross-browsers prefixes and fixes some missing styles too. When I built on my local machine, the demo wasn't running as I expected and as demo on your site.

    Thanks

    Reviewed by marcelaraujo at 2015-04-13 01:49
  • 3. Animation declaration dropped by Firefox

    Firefox can't parse this (example):
    animation: line-scale-pulse-out-rapid 0.9s 0 infinite cubic-bezier(.11,.49,.38,.78);

    After changing it to
    animation: line-scale-pulse-out-rapid 0.9s 0s infinite cubic-bezier(.11,.49,.38,.78);
    it works.

    Reviewed by octycs at 2015-03-25 16:07
  • 4. Added JS to populate `.loader-inner`s

    Cool library. I wouldn't actually use it if I had to manually insert a random number of divs into an element.

    1. It clutters development markup
    2. It's hard to remember how many divs go into XYZ

    This PR fixes that.

    Reviewed by corysimmons at 2015-03-31 06:25
  • 5. 'ball-clip-rotate' shouldn't pulse

    I've removed the pulsing (change in scale) of this loader, as I figured their should be a version that simply spins without any kind of pulsing - just my opinion.

    Reviewed by superelement at 2015-08-11 08:29
  • 6. Added support for angularjs

    Same thing as loaders.css.js but for angular users that don't want to rely on JQuery or whatever js framework.

    This code relies on angular directives to achieve the same result and changes to the loader class will be instantly reflected (provided that you're in a scope digest)

    Reviewed by Masadow at 2015-08-07 09:19
  • 7. Angular directive

    Not really an issue ;) For the need of a project, I wrote a directive which is doing basically the same stuff than the JQuery but for Angular.js. I thought it could be useful for some people.

    Feel free to check it : https://github.com/the-cormoran/angular-loaders

    Thanks for the good work btw.

    Reviewed by alexjoffroy at 2015-06-11 22:12
  • 8. Possible to change speed?

    These are beyond incredible. Is there currently a way to access the speed of the loading animation (slower/faster transitions between a given loader's various states)?

    Reviewed by iggyigner at 2015-04-08 02:12
  • 9. New : Android App developed

    Hi,

    I just saw this, and very impressed . so i have decided to created my first android html app using loaders.css

    Play Store Link : https://play.google.com/store/apps/details?id=com.loader.css Github App Repo : https://github.com/technofreaky/Loaders.CSS-Android-App

    Reviewed by varunsridharan at 2015-04-06 03:54
  • 10. benchmarks

    The description says emphasis is on performance, but how does this compare to other libraries (daneden/[email protected]) or just an animated gif loader? Both CSS transitions and animated GIF loaders are blocked by JavaScript, but is there some other performance gain from using CSS transition loaders?

    Reviewed by alanhamlett at 2015-04-01 01:01
  • 11. Documentation on what browsers this supports

    I know i can dig into the code and use caniuse.com to figure this one out but I'm wondering if you know off hand what browsers this supports?

    If so then it would be awesome if you could throw a table into the Readme for quick reference.

    If not then just let me know and I'll jump in and cross reference with caniuse.com and maybe create a PR with the compatibility table :wink:

    Reviewed by mansona at 2015-03-30 11:31
  • 12. This is the best! Just one quick question

    I think that the license made it clear that I can do this, but just one question. instead of downloading the source, can I just copy this code into a css file and link it to my index.html like you did on your website? here is the css I am talking about: click here. I was just wondering if this would work, or if I need to give attribution, or if I am even allowed to.

    Reviewed by stub-official-band at 2021-08-12 14:29
  • 13. Add a new animation.

    Hey, I am a new open source contributer who is interested in html, css, js. I was wondering if can add a new animation to your library. I can explain further if interested.

    Reviewed by Rishi1314 at 2021-03-31 19:17
  • 14. How to scale the loader's size? Here is the right code

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

    HTML <div class="loader-small"> <div class="loader-inner ball-pulse"> <div></div> <div></div> <div></div> </div><span class="tooltip"> <p>ball-pulse</p></span> </div>

    Reviewed by heiyeliuying at 2020-09-05 00:34

Related

Loading widget based on a Flare animation, allow you to create beautiful custom loading widgets or dialogs

flare_loading Loading widget based on a Flare animation, allow you to create custom loading widgets or dialogs If you're using Rive instead of Flare p

Apr 16, 2021
Shimmer loading - A Flutter project to show how to add shimmer loading animation
Shimmer loading - A Flutter project to show how to add shimmer loading animation

shimmer_loading A Flutter project to show how to add shimmer loading animation.

Feb 6, 2022
Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player.

Lottie for Flutter Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and rende

May 20, 2022
🚅Flutter out-of-the-box collection animations written in pure dart.
🚅Flutter out-of-the-box collection animations written in pure dart.

LoadingIndicator A collection of out of the box loading animations written in pure dart, no extra dependency, inspired by loaders.css and NVActivityIn

May 18, 2022
A Flutter package with a selection of simple yet very customizable set of loading animations.
A Flutter package with a selection of simple yet very customizable set of loading animations.

Flutter Loading Animations A simple yet very customizable set of loading animations for Flutter projects. Installation Add the following to your pubsp

May 17, 2022
Android loading animations
Android  loading animations

Android-SpinKit Android loading animations(I wrote a android edition according SpinKit) Demo Apk Preview Gradle Dependency dependencies { implement

May 23, 2022
A collection of awesome loading animations
A collection of awesome loading animations

NVActivityIndicatorView ⚠️ Check out LoaderUI (ready to use with Swift Package Mananger supported) for SwiftUI implementation of this. ?? Introduction

May 20, 2022
Simple to use yet powerfull style widgets with syntax inspired by CSS.
Simple to use yet powerfull style widgets with syntax inspired by CSS.

Division Simple to use yet powerfull style widgets with syntax inspired by CSS. Please check out styled_widget which is a replacement of Division! The

May 3, 2022
Animation package for Flutter, inspired by Animate.css
Animation package for Flutter, inspired by Animate.css

animator Enables you to create stunning flutter animations, faster, efficient and with less code. Null safety: For null safety please use flutter_anim

May 17, 2022
A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations.
A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations.

flutter_animated_dialog A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations. Dialog barrier i

Apr 4, 2022
Create powerful animations in Flutter and use the hero animation for complex animations
Create powerful animations in Flutter and use the hero animation for complex animations

Hero Animation - Locations UI - Flutter Create powerful animations in Flutter and use the hero animation for complex animations. ⚡  Social Media  Twit

Dec 11, 2021
A growing collection of cool, elegant, efficient and performance-optimized animation widgets.

im_animations About A growing collection of cool, elegant, efficient and performance-optimized animation widgets. Feedback For any feedback please fil

Apr 2, 2022
✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.
✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.

✨ Flutter Spinkit A collection of loading indicators animated with flutter. Heavily inspired by @tobiasahlin's SpinKit. ?? Installing dependencies:

May 19, 2022
Loading Animation With Flutter

Flutter Loading Animation loading.ista.mp4 A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few re

Mar 30, 2022
Lazy Loading Flutter Plugin
Lazy Loading Flutter Plugin

flutter_placeholder_textlines A simple plugin to generate placeholder lines that emulates text in a UI, useful for displaying placeholder content whil

Apr 12, 2022
✨A clean and lightweight loading/toast widget for Flutter, easy to use without context, support iOS、Android and Web
✨A clean and lightweight loading/toast widget for Flutter, easy to use without context, support iOS、Android and Web

Flutter EasyLoading English | 简体中文 Live Preview ?? https://nslog11.github.io/flutter_easyloading Installing Add this to your package's pubspec.yaml fi

May 21, 2022
Help you to build pull-down refresh and pull-up loading in the simplest way.
Help you to build pull-down refresh and pull-up loading in the simplest way.

frefresh Help you to build pull-down refresh and pull-up loading in the simplest way. Although unprecedented simplicity, but the effect is amazing. It

May 16, 2022
A Flutter library for loading skeletons

TODO: Put a short description of the package here that helps potential users know whether this package might be useful for them. Features TODO: List w

Jan 6, 2022
Flutter ListView and GridView that shows Loading Widgets before the real data is loaded.
Flutter ListView and GridView that shows Loading Widgets before the real data is loaded.

loadinglistview This package provide an easy way to show loading indicator(Widget) in a listview or a gridview while the app is still fetching the rea

Dec 8, 2021