Skip to content

Instantly share code, notes, and snippets.

@krizpoon
Created May 27, 2015 03:32
Show Gist options
  • Save krizpoon/1ba56f0f77bb9a1ee302 to your computer and use it in GitHub Desktop.
Save krizpoon/1ba56f0f77bb9a1ee302 to your computer and use it in GitHub Desktop.
Infinite rotation by CSS. Useful for loading spinners.
@keyframes rotating
{
from
{
transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
to
{
transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes rotating
{
from
{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
to
{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
.rotating
{
-webkit-animation: rotating 1s linear infinite;
-moz-animation: rotating 1s linear infinite;
-ms-animation: rotating 1s linear infinite;
-o-animation: rotating 1s linear infinite;
animation: rotating 1s linear infinite;
}
@interactiveRob
Copy link

This is exactly what I needed for a loading spinner. Thanks for sharing!

@Buri22
Copy link

Buri22 commented Jul 20, 2018

Great! Thanks for this just working solution, I used it for rotating in process icon...

@teraluis
Copy link

teraluis commented Jan 3, 2019

thanks so much

@LuisMlopez
Copy link

Works perfectly. Thank you so much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment