Semantic-UI
Semantic-UI copied to clipboard
Loader, spin animation time
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?
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)
@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.
I don't think this will be added since the loader
is a element not a module therefore no JavaScript.
Couldn't there just be a couple modifier classes like slow, slower, or fast?
@GammaGames that could probably work!
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.
Fixed in https://github.com/fomantic/Fomantic-UI 2.4.4
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.
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