Skip to content

Instantly share code, notes, and snippets.

@LaxusCroco
Created February 21, 2024 09:01
Show Gist options
  • Save LaxusCroco/08a147d5947e54faa3591cfe2b4ad40b to your computer and use it in GitHub Desktop.
Save LaxusCroco/08a147d5947e54faa3591cfe2b4ad40b to your computer and use it in GitHub Desktop.
form.is-loading:before,
form.is-loading::after {
position: fixed;
top: 50%;
left: 50%;
border: 1px solid rgb(10 83 55 / 98%);
border-left-color: rgb(192 190 190);
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
}
form.is-loading::before {
content: "";
margin: -23px 0 0 -23px;
height: 44px;
width: 44px;
-webkit-animation: animation-rotate 1000ms linear infinite;
-moz-animation: animation-rotate 1000ms linear infinite;
-o-animation: animation-rotate 1000ms linear infinite;
animation: animation-rotate 1000ms linear infinite;
}
form.is-loading::after {
content: "";
margin: -29px 0 0 -29px;
height: 56px;
width: 56px;
-webkit-animation: animation-rotate 2000ms linear infinite;
-moz-animation: animation-rotate 2000ms linear infinite;
-o-animation: animation-rotate 2000ms linear infinite;
animation: animation-rotate 2000ms linear infinite;
}
@-webkit-keyframes animation-rotate {
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes animation-rotate {
100% {
-moz-transform: rotate(360deg);
}
}
@-o-keyframes animation-rotate {
100% {
-o-transform: rotate(360deg);
}
}
@keyframes animation-rotate {
100% {
transform: rotate(360deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment