npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@loadingio/css-spinner

v2.0.2

Published

Pure CSS Loader Optimized for the Web

Downloads

538

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

tkirbytkirby

Keywords

Readme

css-spinner

Live Demo

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

css spinner

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!