jh3y / whirl

CSS loading animations with minimal effort!

Whirl

CSS loading animations with minimal effort!

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

whirl's Issues

spelling issue

Should be

back-and-forth

instead of

back-and-fourth

Convert variable usage/naming

Is your feature request related to a problem? Please describe.
Currently, if importing for use in an app, variables can't be overridden and there's also likelihood of conflicts with classes, variables etc.

Describe the solution you'd like
For better @import usage, make all variables use the default keyword. Also, prefix common utilities with whirl-.

Wiki

Hey jh3y, 😃

I have time to look 🔍 at your project and I found out that you don't use the wiki. 😒

Did you start before that?
If not I recommend you to disable the above "Settings". 🚫

Yours,
Suriyaa Kudo

How do I align center of the screen.

by default it is aligned center of the page. how do I change that to center of the screen.

Bump versioning on deploy?

Is your feature request related to a problem? Please describe.
How hard is it to bump the version on deploy, maybe even commit?

Describe the solution you'd like
A solution that automates the versioning whenever a new whirl is added or new feature goes in 👍

Describe alternatives you've considered
Manually updating the version/tags 👎

unable print

Installation fails due to node-sass not compiling on Apple Silicon

For Apple Silicon users, the library won't install, because node-sass is not compatible with Apple processors.

Can we change the compiler to sass or at least include pre-compiled CSS files in the dist? Thanks!

Remove versioning altogether

Is your feature request related to a problem? Please describe.
Instead of trying to version every new whirl etc. Remove versioning and deploy on master change. Always push to the same branch which we could name something like dist or assets 👍

modularize? Variable naming

Neat little animations. A couple of things came to mind:

• You might want to 'namespace' the variables in your Less/Sass code else they might conflict with existing variables: $width -> $cs-spinner-width?
• I'm guessing most of us stick to one type of spinner. Does it not make more sense to extract each spinner in its own .(s)css file?

CSS link should link to actual CSS file

Is your feature request related to a problem? Please describe.
When clicking the CSS link for a whirl, it directs to the version tree, not the actual CSS.

Describe the solution you'd like
The link takes me to the actual CSS for the whirl shown.

Linting w/ Stylelint

Is your feature request related to a problem? Please describe.
Would be great to have all whirls maintain a consistent coding style.

Describe the solution you'd like
Integrate stylelint to run on staged files potentially.

Use all CSS files once

Can I merge all 106 CSS files into one file and use that? like whirl.min.css

smallest js helper ever

Add the smallest js helper ever to simply add/remove set classnames to an element.

@jh3y

No animation on Safari 6.0.5

Not sure if this project is intended for use on all WebKit browsers but none of the animations function from your demo page when tested with Safari 6.0.5 on OSX.

positioning of spinner & overlay

spinner: the spinner is not perfectly centered. you should replace

top: 48%;
left: 48%;

with

top: 50%;
left: 50%;
margin-top: -@width/2;
margin-left: -@width/2;

---

overlay: if there is no position declaration on the .csspinner element the overlay expands to size of the next positioned parent, which (in the worst case) can be the whole page! you can add the following css to fix this:

.csspinner { position: relative; }

note: this can cause layout changes because it might overrule existing position declarations of the element...

Publish to npm

Hey hey,

could you please publish this library to npm in order to make browserify based builds work? Currently one needs to load this one via npm install -S jh3y/whirl. Thanks a lot! :)

Unfortunately, whirl is already taken on npm, so you also need to find a "new" unique name. =/

Fix whirl linting errors

Describe the bug

• There are some linting errors currently with the whirls
• Let's fix the linting errors and make sure that CI also does this linting 👍

To Reproduce
Steps to reproduce the behavior:

1. Clone the repo
2. Install deps
3. Run yarn lint:whirls

Expected behavior

• There should be no linting errors

Solution

• Fix the linting errors in relevant src
• Update yarn lint in package.json so it also runs yarn lint:whirls in addition to eslint.
• Maybe move eslint usage to yarn lint:scripts?

Deploy not publishing all CSS for version tag

Describe the bug
Some whirls don't have their CSS published under the tag. For example, half-ring.css doesn't exist. Neither does spinning-dots-scaled. Does something in Travis CI need to change here?

To Reproduce
Check out a whirl such as half-ring and click to navigate to the CSS.

Expected behavior
Taken to the relevant CSS file on Github.

How do I control the size of the whirl?

orbit-star not available on the repository

Describe the bug
A clear and concise description of what the bug is.

orbit-star not available on the repository

To Reproduce

chose orbit-star on the website, then click on "Grab the css on github"

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots/GIFs
If applicable, add screenshots/GIFs to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Cusotm Loader

Is someone able to create a custom loader for our project. If you can please contact me. thanks

Animated favicon for page

Describe the solution you'd like
Let's create an animated favicon for the page 💪

Full rework

Full overhaul of whirl that covers #11 and #9 by restructuring repo to make it easier to work with.

• One preprocessor language; SASS
• A complimentary JS helper
• Ease of adding new whirls
• Easy to set up development environment
• Published to npm

@jh3y