Semantic-UI icon indicating copy to clipboard operation
Semantic-UI copied to clipboard

Loader, spin animation time

Open Melmoth-the-Wanderer opened this issue 7 years ago • 9 comments

Is there any way to configure spinning animation time? .6s is quite aggressive to me. I'd like to set it to .9-1s. I can mess with the DOM and styles, but would be nice to introduce setting for this for the sake of performance. I read the docs and couldn't find any.

Edit: @GammaGames gave nice idea on this:

Couldn't there just be a couple modifier classes like slow, slower, or fast?

Melmoth-the-Wanderer avatar Feb 05 '18 13:02 Melmoth-the-Wanderer

There is a variable in globals/site.variables called @loaderSpeed which you can change (https://github.com/Semantic-Org/Semantic-UI/blob/master/src/themes/default/globals/site.variables#L183)

y0hami avatar Feb 09 '18 08:02 y0hami

@hammy2899 thanks for the hint! Switching to buildtools would do the trick and someday I'll probably do it, when it makes more sense in case of my project.

Currently I'm using standalone file downloaded from the repo without bulid tools and was hoping to have the setting exposed in runtime, if it's worth adding extra javascript/css to the element.

Melmoth-the-Wanderer avatar Feb 09 '18 12:02 Melmoth-the-Wanderer

I don't think this will be added since the loader is a element not a module therefore no JavaScript.

y0hami avatar Feb 09 '18 12:02 y0hami

Couldn't there just be a couple modifier classes like slow, slower, or fast?

GammaGames avatar Feb 14 '18 17:02 GammaGames

@GammaGames that could probably work!

y0hami avatar Feb 15 '18 08:02 y0hami

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

stale[bot] avatar May 16 '18 09:05 stale[bot]

Fixed in https://github.com/fomantic/Fomantic-UI 2.4.4

lubber-de avatar Jan 05 '19 17:01 lubber-de

Is there any way to configure spinning animation time?

If you don't mind overriding the default CSS, you can add something like this to a CSS file included after Semantic's:

.ui.loader:after {
  animation: loader 5s linear infinite;
}

You can obviously then add your own classes to that to control which items spin at different speeds.

aggregate1166877 avatar Dec 18 '23 13:12 aggregate1166877

You can also install the community fork, which has this feature as well as a ton of bugfixes and extras: https://fomantic-ui.com/elements/loader.html#speed

GammaGames avatar Dec 18 '23 15:12 GammaGames