Skip to content

Instantly share code, notes, and snippets.

@miso-belica
Last active April 6, 2018 15:37
Show Gist options
  • Save miso-belica/6a061093e8eaa7098e6dde0077ea1abb to your computer and use it in GitHub Desktop.
Save miso-belica/6a061093e8eaa7098e6dde0077ea1abb to your computer and use it in GitHub Desktop.
<img id="preloader" width="50" height="50" src="data:image/png;base64,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">
<style media="screen">
/* Absolute Center Spinner */
#preloader {
display: block;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
-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;
}
/* Transparent Overlay */
#preloader:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
/* 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);
}
}
</style>
<script type="text/javascript">
(function(){
var loading = 0;
var id = setInterval(frame, 64);
function frame(){
if (loading == 100){
clearInterval(id);
document.getElementById("preloader").style.display = "none";
} else {
loading = loading + 1;
}
}
})();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment