Feature request: Variable Spinner Speed

sonicer105 commented 6 years ago

Describe the problem you'd like to see solved or task you'd like to see made easier

Only one type of spinner speed is currently available through the use of fa-spin. The current speed feels a little slow and I would like to have at least one faster speed (maybe 1.75 to 2 times the current speed).

Is this in relation to an existing part of Font Awesome or something new?

It's related to fa-spin

What is 1 thing that we can do when building this feature that will guarantee that it is awesome?

There's really only one small item in the request so I don't know how to answer this.

Why would other Font Awesome users care about this?

It would make for a better loading animation in my personal opinion. I'm sure at least some others feel the same since I was able to find some stack exchange answers about DIY-ing a faster speed but I would prefer something official.

On a scale of 1 (sometime in the future) to 10 (absolutely right now), how soon would you recommend we make this feature?

5, so "while we're young" as you put it in the template

Feature request checklist

[x] This is a single feature (i.e. not a re-write of all of Font Awesome)
[x] The title starts with "Feature request: " and is followed by a clear feature name (Ex: Feature request: moar cowbell)
[x] I have searched for existing issues and to the best of my knowledge this is not a duplicate

tagliala commented 6 years ago

Hi!

Thanks for being part of the Font Awesome Community.

This request is nicely written and legit.

Please keep in mind that you can increase the speed for your needs with two lines of css: https://jsfiddle.net/tagliala/d7w55ryp/20/

.fa-spin {
  -webkit-animation: fa-spin 1s infinite linear;
  animation: fa-spin 1s infinite linear;
}

reFX-Mike commented 6 years ago

Please keep in mind that you can increase the speed for your needs with two lines of css:

This doesn't address the issue that you then couldn't use two different speeds at the same time.

The same argument could be made for the different sizes. But there you don't tell people to use CSS.

Let's keep it simple and clean and have a few speeds available as classes.

tagliala commented 6 years ago

This doesn't address the issue that you then couldn't use two different speeds at the same time.

At the same time you mean in the same animation or in different animations?

The title states "variable speed", the first post instead describes the feature as the current speed feels a little slow and I would like to have at least one faster speed (maybe 1.75 to 2 times the current speed).

The same argument could be made for the different sizes. But there you don't tell people to use CSS.

Having some helpers doesn't mean that we should have all helpers.

Anyway, this request is opened for upvotes: if this will gain enough traction, we would definitely consider to add new speed classes.

reFX-Mike commented 6 years ago

At the same time you mean in the same animation or in different animations?

On different animations. Let's say I have an electron-app with multiple spinners for different purposes. One is supposed to spin really slow, to show slow progress, another one is supposed to spin relatively fast, to show fast progress.

Now I would need to create two extra classes, copy the keyframes over etc. and all that because you can't see the value of these helpers? Why do we have helpers for different sizes then? Or transforms? Or masking?

I think it's pretty weird so categorically denying this request, when it's trivial to implement, takes up barely any space, and provides a clear benefit.

Should I maybe ask for this in Fontawesome Pro? Or is that repository only for icon-requests?

tagliala commented 6 years ago

Now I would need to create two extra classes, copy the keyframes over etc. and all that because you can't see the value of these helpers?

I understand that this feature has value for your use case.

What I'm trying to say is that if this feature is crucial for your application, you can simply add two lines of css: https://jsfiddle.net/d7w55ryp/25/

Anyway, this request is open for upvotes for other members of Font Awesome community

Should I maybe ask for this in Fontawesome Pro? Or is that repository only for icon-requests?

You could open this request also in FA pro.

NickNiebling commented 6 years ago

+1 I've got an idea about making a "loading icon" by stacking e.g. 3x "spinner-third" - all 3 in different colors and having different spinning speeds to create an effect that looks kind of random..

Even having variable speeds to 1 spinning icon would be nice (not sure thats possible in CSS, might be an JS/SVG feature), making us able to do something like "googles loading icon" out of the box: http://gifimage.net/wp-content/uploads/2017/11/google-loading-gif-8.gif

dardub commented 5 years ago

I don't know if it's only the React version, but typically spinners animate much faster. Is there any justification for having such a slow default animation speed?

chadwtaylor commented 5 years ago

+1

FortAwesome / Font-Awesome