Created
September 22, 2022 23:38
-
-
Save prabby/82bd22c7afb91a1673638f59a75948ba to your computer and use it in GitHub Desktop.
Single Element CSS-Only Absolute Center Overlay Spinner
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="loading">Loading…</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Firefox 64 - 20190102 | |
// If you see wobbly dots spinning very slowly move your mouse around over the overlay to see the real behavior | |
// Seems to be a quirk/bug specific to codepen... |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Absolute Center Spinner */ | |
.loading { | |
position: fixed; | |
z-index: 999; | |
height: 2em; | |
width: 2em; | |
overflow: visible; | |
margin: auto; | |
top: 0; | |
left: 0; | |
bottom: 0; | |
right: 0; | |
} | |
/* Transparent Overlay */ | |
.loading:before { | |
content: ''; | |
display: block; | |
position: fixed; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background-color: rgba(0,0,0,0.3); | |
} | |
/* :not(:required) hides these rules from IE9 and below */ | |
.loading:not(:required) { | |
/* hide "loading..." text */ | |
font: 0/0 a; | |
color: transparent; | |
text-shadow: none; | |
background-color: transparent; | |
border: 0; | |
} | |
.loading:not(:required):after { | |
content: ''; | |
display: block; | |
font-size: 10px; | |
width: 1em; | |
height: 1em; | |
margin-top: -0.5em; | |
-webkit-animation: spinner 1500ms infinite linear; | |
-moz-animation: spinner 1500ms infinite linear; | |
-ms-animation: spinner 1500ms infinite linear; | |
-o-animation: spinner 1500ms infinite linear; | |
animation: spinner 1500ms infinite linear; | |
border-radius: 0.5em; | |
-webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0; | |
box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0; | |
} | |
/* Animation */ | |
@-webkit-keyframes spinner { | |
0% { | |
-webkit-transform: rotate(0deg); | |
-moz-transform: rotate(0deg); | |
-ms-transform: rotate(0deg); | |
-o-transform: rotate(0deg); | |
transform: rotate(0deg); | |
} | |
100% { | |
-webkit-transform: rotate(360deg); | |
-moz-transform: rotate(360deg); | |
-ms-transform: rotate(360deg); | |
-o-transform: rotate(360deg); | |
transform: rotate(360deg); | |
} | |
} | |
@-moz-keyframes spinner { | |
0% { | |
-webkit-transform: rotate(0deg); | |
-moz-transform: rotate(0deg); | |
-ms-transform: rotate(0deg); | |
-o-transform: rotate(0deg); | |
transform: rotate(0deg); | |
} | |
100% { | |
-webkit-transform: rotate(360deg); | |
-moz-transform: rotate(360deg); | |
-ms-transform: rotate(360deg); | |
-o-transform: rotate(360deg); | |
transform: rotate(360deg); | |
} | |
} | |
@-o-keyframes spinner { | |
0% { | |
-webkit-transform: rotate(0deg); | |
-moz-transform: rotate(0deg); | |
-ms-transform: rotate(0deg); | |
-o-transform: rotate(0deg); | |
transform: rotate(0deg); | |
} | |
100% { | |
-webkit-transform: rotate(360deg); | |
-moz-transform: rotate(360deg); | |
-ms-transform: rotate(360deg); | |
-o-transform: rotate(360deg); | |
transform: rotate(360deg); | |
} | |
} | |
@keyframes spinner { | |
0% { | |
-webkit-transform: rotate(0deg); | |
-moz-transform: rotate(0deg); | |
-ms-transform: rotate(0deg); | |
-o-transform: rotate(0deg); | |
transform: rotate(0deg); | |
} | |
100% { | |
-webkit-transform: rotate(360deg); | |
-moz-transform: rotate(360deg); | |
-ms-transform: rotate(360deg); | |
-o-transform: rotate(360deg); | |
transform: rotate(360deg); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment