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.

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

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.

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.

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.

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)

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.

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

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

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?

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:

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/loaders.css/src/animations/ball-scale-multiple.scss b/node_modules/loaders.css/src/animations/ball-scale-multiple.scss
index ecd61fb..dff1fe0 100644
--- a/node_modules/loaders.css/src/animations/ball-scale-multiple.scss
+++ b/node_modules/loaders.css/src/animations/ball-scale-multiple.scss
@@ -30,7 +30,7 @@ $size: 60px;
   @include ball-scale-multiple();
 
   position: relative;
-  transform: translateY(-$size / 2);
+  transform: translateY(calc(-$size / 2));
 
   > div {
     @include balls();

This issue body was partially generated by patch-package.

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.

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.

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>