loadingio/css-spinner

small, elegant pure css spinner for ajax or loading animation

css-spinner

Live Demo

Collection of 12 small, elegant pure css spinners for your website's loading animation.

Features

• vanilla - no external dependency and no additional library required.
• standalone - use any of them separately.
• customizable - use Stylus variables to quickly customize them to fit your needs.
• easy to use - simply copy & paste while also easy to use with pug mixins.
• small - average size 1K per spinner unminimized, unzipped

Usage

loading.io provides a web interface to quickly choose and copy your desired spinners, yet you can still find the source code in this repository. The basic usage is as:

1. Find and download the html files of desired loader under dist folder.
2. Copy its content to the place you want to use this loader.

Separated CSS and HTML files are also available under build folder for reusing CSS codes to reduce payload size.

We also provide stylus and pug source files for better integrating these spinners into your project. Find corresponding stylus and pug files for your desired spinners under src/ folders.

To use stylus files alone, you will have to provide variables listed in vars.styl.

npm package

This module is also released through npm as @loadingio/css-spinner.

Build

You can also customize all these loaders by building them yourself.

• First, update vars.styl based on your needs.
• make sure required packages are installed by npm install. You will need NPM / NodeJS pre-installed.
• build with this command: npm run build
  • generated files will be in dist/ folder.

Browser Compatibility

These spinners use CSS Animation and Transformation which is widely supported by major modern browsers except IE<=9. To support older browsers like IE9, please use loading.io to generate alternative GIF Loaders instead.

License

All loader files here are released under CC0 License. However, you could attribute to this link: loading.io css spinner ( https://loading.io/css/ ) to give loading.io a thumbs-up.

Other source codes are released under MIT License.

Other Resources

If you want to make custom css loading animation, loading.io also provides loading.css - A pure CSS loading animation library, and a helper GIF builder. Don't forget to check it out and share your customized loader with us!

css-spinner's Issues

Error: Could not find module 'color' in build.ls

I looked through the entire package and couldn't see a specific module of simply color. It was being referenced in the first line of the build.ls file which is
require! <[fs fs-extra path progress color stylus pug uglifycss]>

I changed color to ldcolor and that seemed to fix it.

This is my output after running npm run build. I wasn't sure what to expect from the undefined references but the spinner sizes were correctly updating after changing the value in the vars.styl file.

> @loadingio/[email protected] build
> lsc build.ls

Build all CSS-spinners...
   Build Spinners [undefined] undefined 0.0s

Finished.

Edit: I think there's still something wrong with the builder. The undefined is resulting in the spinners not building correctly and I don't know how to troubleshoot that. Maybe it's something to do with the color module and changing to ldcolor wasn't actually the fix.

scss

Hi, thank you for this library. How about scss sources alternatives? Stylus is not so popular.

Copy the CSS, HTML code

For the first time, I visited https://loading.io/css/ and found out that I have to manually select-copy the HTML, CSS code. But it would be a great user experience if I could click the CSS, HTML button on right side and it would be copied in my cursor. Here is the sample image below.

I can do it and make a PR if you want.

vars.styl not found in repository

Hello,

in the README you state that to build the code, you need modify the file: vars.styl.

But I can't find the file anywhere in the repo.

The link is redirecting here: https://github.com/loadingio/css-spinner/blob/master/vars.styl

Also there is error running npm run build
Error: ENOENT: no such file or directory, open 'vars.styl'

Update the README

After the recent commit some files were moved around (like vars.styl), so the compilation steps are no longer valid. Would be great to update the guide with the new paths to those files

Unable to find vars.styl

Tried to download and build with some changed sizes, but can't find vars.styl.
The file linked in the readme (https://github.com/loadingio/css-spinner/blob/master/vars.styl) is no longer there.

lds-ripple loader looking bad on safari

The lds-ripple effect is not working properly on safari on iOS 15 (at least on my device). The ripples are supposed to fade out as they grow and then disappear, but instead they start fading out and then they are shown in full color just before disappearing.

This is what I expect:

And this is what I see:

Any chance to fix this? Thanks!

Change the size of pure css loaders

Thank you for your awesome library. But I am struggling on reducing the size of the loaders. Can you give us a hint on how to do it?

Not working

Hi,
I'm having trouble using your spinners. For example, I downloaded the html code of https://github.com/loadingio/css-spinner/blob/master/build/circle/sample.html, and when I run sample.html in browser I get nothing. Can you please help me?