https://github.com/jh3y/whirl

CSS loading animations with minimal effort!
https://github.com/jh3y/whirl

animation css css-loading-animations hacktoberfest hacktoberfest2020 loader loading loading-animation loading-animations loading-bar loading-indicator loading-screen loading-spinner loading-spinners progress pseudo-elements spinner spinners whirl

Last synced: 7 days ago
JSON representation

CSS loading animations with minimal effort!

• Host: GitHub
• URL: https://github.com/jh3y/whirl
• Owner: jh3y
• License: mit
• Created: 2014-02-22T02:19:51.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T17:33:53.000Z (almost 2 years ago)
• Last Synced: 2024-10-29T17:51:41.920Z (about 1 month ago)
• Topics: animation, css, css-loading-animations, hacktoberfest, hacktoberfest2020, loader, loading, loading-animation, loading-animations, loading-bar, loading-indicator, loading-screen, loading-spinner, loading-spinners, progress, pseudo-elements, spinner, spinners, whirl
• Language: SCSS
• Homepage: https://whirl.netlify.com
• Size: 5.01 MB
• Stars: 1,757
• Watchers: 35
• Forks: 253
• Open Issues: 33
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-web-effect - Whirl - CSS loading animations with minimal effort! (🚀 A series of exquisite and compact web page cool effects / Loading Effect)
• awesome-web-effect - Whirl - CSS loading animations with minimal effort! (🚀 A series of exquisite and compact web page cool effects / Loading Effect)
• jimsghstars - jh3y/whirl - CSS loading animations with minimal effort! (SCSS)

README

        
[![Build Status](https://travis-ci.org/jh3y/whirl.svg?branch=master)](https://travis-ci.org/jh3y/whirl)

[![Netlify Status](https://api.netlify.com/api/v1/badges/d3e57ac0-62c4-4f24-85a8-70b6468c0245/deploy-status)](https://app.netlify.com/sites/whirl/deploys)

# Whirl

## CSS loading animations with minimal effort!

[![Whirl](https://raw.github.com/jh3y/pics/master/whirl/whirl.gif)](https://raw.github.com/jh3y/pics/master/whirl/whirl.gif)

`whirl` is a curation of CSS loading animations(whirls! 😅). It started as a drop in `CSS` file to get easy animations using `:pseudo` elements. It's now a collection of loading animations to use, take inspiration from, change and do what you want with 👍

### No CSS distro?

It's inefficient. It's likely an app will only use one or two loaders. Pulling them all into an app would be overkill. Most projects use some form of bundling making it possible to import a single loader's styles.

### Usage

You've got different options here.

You can install `whirl` and import the styles you want. You get both CSS and SASS files 👍

```shell

npm i @jh3y/whirl

yarn add @jh3y/whirl

```

Alternatively, you can grab the [CSS or SASS](https://github.com/jh3y/whirl/tags) and change to your needs. There's a dynamic link in the demo. Or visit the latest versions tag branch 👍

⚠️ Be aware that if you're bundling, you'll likely have to override some styles. Be careful with conflicting classnames or animation names.

### Contributing

See [`CONTRIBUTING`](https://github.com/jh3y/whirl/blob/master/.github/CONTRIBUTING.md).

---

@jh3y 🐻 2019