Skip to content

Instantly share code, notes, and snippets.

@veekthoven
Last active February 24, 2021 13:14
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save veekthoven/6dfb00a61b7be4b321a4bb1f72174959 to your computer and use it in GitHub Desktop.
Save veekthoven/6dfb00a61b7be4b321a4bb1f72174959 to your computer and use it in GitHub Desktop.
"Stole" it from Bulma's source code. It adds a loading spinner to buttons to give users feed back.
// Hat-tip to bulma
.loader {
color: transparent !important;
pointer-events: none;
position: relative;
}
.loader:after {
animation: spinAround 500ms infinite linear;
border: 2px solid #fff;
border-radius: 50%;
border-right-color: transparent;
// border-top-color: transparent;
content: "";
display: block;
width: 1em;
height: 1em;
position: relative;
position: absolute;
left: calc(50% - (1em / 2));
top: calc(50% - (1em / 2));
position: absolute !important;
}
@keyframes spinAround {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment