Skip to content

jh3y/whirl

Folders and files

NameName
Last commit message
Last commit date

Latest commit

a43ebd5 Β· Jan 15, 2022

History

50 Commits
Oct 2, 2019
Mar 9, 2019
Jan 15, 2022
Oct 1, 2019
Mar 9, 2019
Mar 9, 2019
Mar 9, 2019
Mar 9, 2019
Mar 9, 2019
Mar 9, 2019
Mar 9, 2019
Oct 8, 2019
Oct 2, 2019
Mar 9, 2019
Mar 9, 2019
Mar 9, 2019
Jan 15, 2022
Jan 15, 2022
Oct 7, 2019

Repository files navigation

Build Status Netlify Status

Whirl

CSS loading animations with minimal effort!

Whirl

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 πŸ‘

npm i @jh3y/whirl
yarn add @jh3y/whirl

Alternatively, you can grab the CSS or SASS 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.


@jh3y 🐻 2019