Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Loader, spin animation time #6138

Open
Melmoth-the-Wanderer opened this issue Feb 5, 2018 · 9 comments
Open

Loader, spin animation time #6138

Melmoth-the-Wanderer opened this issue Feb 5, 2018 · 9 comments
Labels

Comments

@Melmoth-the-Wanderer
Copy link

Melmoth-the-Wanderer commented Feb 5, 2018

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?

@y0hami
Copy link
Member

y0hami commented Feb 9, 2018

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)

@Melmoth-the-Wanderer
Copy link
Author

Melmoth-the-Wanderer commented Feb 9, 2018

@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.

@y0hami
Copy link
Member

y0hami commented Feb 9, 2018

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

@GammaGames
Copy link
Contributor

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

@y0hami
Copy link
Member

y0hami commented Feb 15, 2018

@GammaGames that could probably work!

@stale
Copy link

stale bot commented May 16, 2018

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.

@lubber-de

This comment was marked as spam.

@aggregate1166877
Copy link

aggregate1166877 commented Dec 18, 2023

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.

@GammaGames
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants