Skip to content

Instantly share code, notes, and snippets.

@nicocrm

nicocrm/spinner.css

Created May 6, 2016 12:04
Show Gist options
  • Save nicocrm/6a7dc7fe98201a0cfa857a680a73fb37 to your computer and use it in GitHub Desktop.
Save nicocrm/6a7dc7fe98201a0cfa857a680a73fb37 to your computer and use it in GitHub Desktop.
Download ZIP
CSS spinner
Raw
spinner.css
/* Loading spinner in dashboard widgets */
@keyframes circles-loader {
0% {
transform: rotate(-720deg);
}
50% {
transform: rotate(720deg);
}
}
.spinner-container .spinner {
position: relative;
text-indent: -9999px;
display: inline-block;
width: 25px;
height: 25px;
background: rgba(204, 204, 204, 0.9);
border-radius: 100%;
animation: circles-loader 3s infinite ease-in-out;
transform-origin: 50% 100%;
}
.spinner-container .spinner::before {
background: rgba(204, 204, 204, 0.6);
border-radius: 100%;
content: '';
position: absolute;
width: 25px;
height: 25px;
top: 18.75px;
left: -10.82532px;
}
.spinner-container .spinner::after {
background: rgba(204, 204, 204, 0.4);
border-radius: 100%;
content: '';
position: absolute;
width: 25px;
height: 25px;
top: 18.75px;
left: 10.82532px;
}
.spinner-container {
min-height: 100px;
width: 100%;
text-align: center;
}
.spinner-text {
display: block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment