Skip to content

Instantly share code, notes, and snippets.

@Potato22

Potato22/Loading-spin.html

Created May 30, 2018 10:28
Show Gist options
  • Save Potato22/5311b6626945ae246a472864343cc869 to your computer and use it in GitHub Desktop.
Save Potato22/5311b6626945ae246a472864343cc869 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Loading-spin.html
<!DOCTYPE html>
<html>
<head>
<style>
.biggercontainer {
display: block;
margin-left: 46.9%;
margin-top: 18.9%;
position: absolute;
background-color: #c9c9c9;
width: 80px;
height: 80px;
border-radius: 80px;
animation-name: aura;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
z-index: -1;
}
@keyframes aura {
100% {
transform: scale(1.2);
background-color: #e4e4e4;
}
}
.container {
display: block;
margin-left: 48%;
margin-top: 20%;
position: absolute;
animation-name: spin;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes spin {
100% {
transform: rotate(360deg)
}
}
.bigspin {
display: block;
background-color: rgb(145, 145, 145);
width: 50px;
height: 50px;
border-radius: 50px;
animation-name: spin;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.dot {
display: block;
position: absolute;
width: 10px;
height: 10px;
background-color: rgb(255, 255, 255);
float: left;
margin-left: 41%;
margin-top: 8px;
border-radius: 10px;
animation-name: dot;
animation-duration: 0.5s;
animation-fill-mode: forwards;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes dot {
100% {
transform: scale(1.9)
}
}
.dot2 {
display: block;
position: absolute;
width: 10px;
height: 10px;
background-color: rgb(255, 255, 255);
float: left;
margin-left: 41%;
margin-top: 62%;
border-radius: 10px;
animation-name: dot2;
animation-duration: 0.5s;
animation-fill-mode: forwards;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0.5s;
}
@keyframes dot2 {
100% {
transform: scale(1.9)
}
}
.full {
opacity: 0;
animation-duration: 0.7s;
animation-fill-mode: forwards;
animation-name: in;
animation-name: movein;
animation-duration: 0.2s;
transform: translate(0px, 90px);
}
.full {
animation-name: movein;
animation-duration: 0.5s;
animation-timing-function: ease-in-out;
}
@keyframes movein {
100% {
opacity: 1;
transform: translate(0px, 0px);
}
}
</style>
</head>
<body>
<div class="full">
<div class="container">
<div class="bigspin"><div class="dot"></div><div class="dot2"></div></div>
</div><div class="biggercontainer"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment