connoratherton / loaders.css

Delightful, performance-focused pure css loading animations.

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

• http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
• http://aerotwist.com/blog/pixels-are-expensive/
• http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
• http://frontendbabel.info/articles/webpage-rendering-101/

Inspired by loaders.css

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

• React - Jon Jaques built a React demo you can check out here
• Vue - Kirill Khoroshilov loaders wrapped into components vue-loaders
• Angular - the-corman created some directives for angular, as did Masadow in this pr
• Ember - Stanislav Romanov created an Ember addon ember-cli-loaders for using Loaders.css in Ember applications
• iOS - ninjaprox and ontovnik
• Android - Jack Wang created a library and technofreaky created an app

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.

loaders.css's Issues

how to load loaders.css with Vue cli?

No animations

I am using this react loaders and there is no animation just static circles?

Update the README with related links

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.

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 😉

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.

Wrong file name for ball-triangle-path

For the animation ball-triangle-path the scss file is named as src/animations/ball-triangle-trace.scss I think it would be nice to have consistent naming so upstream libs using this doesnt break when fetching files by animation name

Pace.js implementation ?

Hey there,

Is there anyway to use this awesome project with pace.js?

Cheers.

ball-scale-random bugs on the beginning

ball-scale-random block on the beginning before animation begins

where is the demo?

where is the demo at 'https://connoratherton.com/loaders'?

Add zig-zag-double animation

This can be used in the mobile terminal?

This can be used in the mobile terminal?

Change foreground color?

The background color of my page is white, so it becomes invisible.

ball-clip-rotate-pulse not having ball in center

When I am using same CSS as used in demo, it's not showing ball of ball-clip-rotate-pulse in center

Is #32 loader missing ?

Is the loader #32 missing or did I miss something in the code ?

Are there any rules?

I would like to contribute to the increase in the concentration of load animation, what are the considerations?

how to resize the size of the loader

I Want to meke the loader littler

Create a scalar factor mixin for creating different size animations

cc @jonjaques

Pacman enhancement

Should the pacman close his mouth when eating? 😮 😶

Name of the specific loader?

How to know the name of the specific loader?
Neither mentioned on the website nor in the README.

It will be good to see the names of the loaders on the website (maybe on hover).
Correct me if I am wrong.

Add link to top of repo page

It's fine if it's in the README, but there should be a link to it at the top of the page as well.

Incorrect animations in FF and IE

ball-clip-rotate and ball-clip-rotate-pulse have bogus scale animation in FF and IE.

Can the nth-child(0) match some element ?

https://github.com/ConnorAtherton/loaders.css/blob/master/loaders.css#L45

this project is very fantasy ! but i find the source code has the nth-child(0) selector . as far as i know.

it can't match any element . why is it exist ?

Changing colors

Hi Connor,

Thank you for building this fantastic library, I've had a lot of fun incorporating it into my application. Connor I wanted to ask you how we can change the color of the loaders. I've actually gone to the trouble of changing the code in the loaders.min.css file to .ball-pulse-sync>div,.ball-pulse>div{width:15px;height:15px;margin:2px;display:inline-block}.ball-pulse-sync>div,.ball-pulse>div,.ball-scale>div{background-color:#2F2F2F;border-radius:100%}@-webkit-keyframes scale{0%,80%{-webkit-transform:scale(1);transform:scale(1);opacity:1}45%{-webkit-transform:scale(.1);transform:scale(.1);opacity:.7}}@keyframes. The background color by default is #fff (white) I believe. This has worked when I am running the react application in the dev environment locally, however, once my application codebase is minified with webpack and deployed, this is not working. Any ideas why? Is there another way for us to make css changes to the loaders.min.css file?

Thank you,

Have a dist folder if you're going to have a src folder

Again, this makes the repo neat.

Code for demo.html is minified

It'd be nice to have the demo/demo.html file unminified, in case someone wants to browse through the source.

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>

thanks for sharing

I have done a similar project in flutter inspired by your project.

Can not adjust loader' size ?

i need a smaller one loader,
it's too big, is there any ways to make it smaller ?

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.

Small/Large sizing classes

Hello, thanks for putting this together - Looks great so far!

Do you see utility in adding some sizing classes? Most of these are appropriate for loading panes or pages currently, but some might work well inside a button or other UI elements.

I'm currently wrapping a React component around this (props for active, type) and a sizing option would be great too. I'll see if I can get to a PR tonight but just wanted to get your thoughts.

No license?

There is no licensing information anywhere in the repository or README file.

Suggestion

Add a loading animation similar to the one used by rollage, the source code for which is here.

Cannot read property 'fn' of undefined

Looks like this is failing because it wants JQuery that I don't have. However, $ is defined because chrome defines it if you are not using JQuery.

  $.fn.loaders = function() {
    return this.each(function() {
      var elem = $(this);
      $.each(divs, function(key, value) {
        if (elem.hasClass(key))
          elem.html(addDivs(value))
      })
    });
  };

about creating a Meteor package

hi, i download your source code, and made a meteor package with it,
because there is no an official one,
and i believe many developers will love it ,
if you are not willing to see that, i will remove it !
and i promise i will update it when you publish a new version.
thanks for your hard work.

Documentation on how to use

Please add a list of the needed classes in the html markup to use each loader effect.

Is `ball-pulse-round` missing?

Hey there, I was working on integrating this library into my project and I noticed that ball-pulse-round is missing from loaders.scss. Is this by design?

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)?

Demo offline

https://connoratherton.com/loaders

Rename loaders.js -> loaders.css.js

Bit of namespacing since "loaders.js" seems like it could be used for other things.

Add LICENSE file to repo

People usually look for this rather than at the bottom of your README for a license. Here's the content of a standard Github MIT LICENSE file:

The MIT License (MIT)

Copyright (c) 2015 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.

What is .scss-lint.yml

Should that be in the repo if it's a development thing? If it's necessary (and not just a convenience thing) then could it go into src?

Demo site is not working

Viewed on Google chrome
Version 54.0.2840.71 (64-bit)

Build is non-deterministic, CSS changes on every build

The random animation delays (e.g.

loaders.css/src/animations/line-scale-random.scss

Lines 20 to 21 in 40dfe69

	animation-delay: ((random(100) / 100) - 0.2) + s;
	animation-duration: ((random(100) / 100) + 0.3) + s;

) are only calculated at build time and make the build non-deterministic.

Every build results in a different CSS file, which is probably not ideal for a number of reasons:

• A refactor with no change to the resulting CSS will still generate new animations.
• Random animations are locked for each version, so users of an app using this library will see the same "random" animation for a while until they upgrade, at which point they'll get a new "random" animation until the next upgrade.

If you don't see this as a problem, feel free to close this issue.

Add docs on how to change loader color

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

Prevent start flicker for all animations!

Add animation-fill-mode: both; to a mixin then include in every animation to prevent the first frame flickering when the animation starts.

Material Design spinner

Hi, would be cool to have Material Design spinner too. Thanks

benchmarks

The description says emphasis is on performance, but how does this compare to other libraries (animate-css/animate.css@c0abb26) 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?

New chrome update makes animations pulse

As of chrome 43, it seems as though the animations will pulse, i.e grow and shrink as they run through the animation.

Put demo in gh-pages

Then you can link to a live demo, and in the README link to the gh-pages branch for people who want to look at the code.

This will keep your repo neater.