Skip to content

Instantly share code, notes, and snippets.

@javiBertos

javiBertos/custom-loading-spinner.html

Last active September 14, 2017 23:11
Show Gist options
  • Save javiBertos/0862ab03a2946751deaf7f8653fe8c90 to your computer and use it in GitHub Desktop.
Save javiBertos/0862ab03a2946751deaf7f8653fe8c90 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
custom-loading-spinner.html
<!DOCTYPE html>
<html>
<head>
<title>Custom loading spinner</title>
<style>
.spinner-holder {
background-color: transparent;
height: 100vh;
opacity: 0;
position: fixed;
transition: all .5s linear;
top: 0;
visibility: hidden;
width: 100vw;
z-index: 9999;
}
.spinner-holder.spinner-on {
background-color: rgba(255, 255, 255, .8);
display: block;
opacity: 1;
visibility: visible;
}
.spinner {
width: 10em;
height: 10em;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: #007e88;
border-radius: 50%;
}
.spinner-progress {
background: #fff;
border-radius: 50%;
height: 9em;
margin-top: .5em;
margin-left: .5em;
position: relative;
width: 9em;
}
.spinner-progress::before,
.spinner-progress::after {
content: '';
border: .5em solid transparent;
border-radius: 50%;
height: 9em;
left: -.5em;
position: absolute;
top: -.5em;
transform: rotate(-45deg);
width: 9em;
}
.spinner-progress::before {
animation: spin 2s infinite linear;
border-bottom: .5em dashed rgba(255, 255, 255, .6);
}
.spinner-progress::after {
animation: start-finish 2s infinite linear;
border-bottom: .5em solid #007e88;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
100% {
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
100% {
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
}
@-webkit-keyframes start-finish {
0% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
40% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
60% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
100% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
@keyframes start-finish {
0% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
40% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
60% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
100% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
</style>
</head>
<body>
<h1>My custom spinner</h1>
<div class="spinner-holder spinner-on">
<div class="spinner">
<div class="spinner-progress"></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment