blob: d1a27a9f8e140674be993b88d0e0772fca25b4a2 [file] [log] [blame]
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Material spinner demo</title>
<style type="text/css">
@keyframes background-anim {
from {
background-color: rgb(30,100, 30);
}
to {
background-color: rgb(30, 30, 100);
}
}
html, body {
height: 100%;
}
html {
background-color: #242424;
}
#background {
margin: 0;
height: 100vh;
width: 100vw;
background-color: #282828;
transform:scale(3);
animation: background-anim 5s alternate-reverse infinite ease-in-out;
}
.absolute-center {
margin: auto;
position: absolute !important;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.material-spinner {
display: inline-block;
position: relative;
width: 4.25rem;
height: 4.25rem;
animation: container-rotate 1568.23529ms linear infinite; }
.material-spinner .spinner-layer {
position: absolute;
width: 100%;
height: 100%;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
.material-spinner .circle-clipper {
display: inline-block;
position: relative;
width: 50%;
height: 100%;
overflow: hidden; }
.material-spinner .half-circle {
position: absolute;
width: 4.25rem;
height: 4.25rem; }
.material-spinner .half-circle > div > div {
width: 50%;
height: 100%;
overflow: hidden; }
.material-spinner .half-circle > div > div > div {
width: 3.75rem;
height: 3.75rem;
border: 0.25rem solid #eee;
border-radius: 50%; }
.material-spinner .left .half-circle {
transform: rotate(129deg);
animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
.material-spinner .left .half-circle > div {
transform: rotate(45deg); }
.material-spinner .right .half-circle {
left: -100%;
transform: rotate(-129deg);
animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
.material-spinner .right .half-circle > div {
transform: rotate(135deg); }
@keyframes container-rotate {
to {
transform: rotate(360deg); } }
@keyframes fill-unfill-rotate {
12.5% {
transform: rotate(135deg); }
25% {
transform: rotate(270deg); }
37.5% {
transform: rotate(405deg); }
50% {
transform: rotate(540deg); }
62.5% {
transform: rotate(675deg); }
75% {
transform: rotate(810deg); }
87.5% {
transform: rotate(945deg); }
to {
transform: rotate(1080deg); } }
@keyframes left-spin {
from {
transform: rotate(130deg); }
50% {
transform: rotate(-5deg); }
to {
transform: rotate(130deg); } }
@keyframes right-spin {
from {
transform: rotate(-130deg); }
50% {
transform: rotate(5deg); }
to {
transform: rotate(-130deg); } }
</style>
</head><body>
<div id="background">
<div class="absolute-center material-spinner">
<div class="spinner-layer">
<div class="circle-clipper left">
<div class="half-circle"><div><div><div></div></div></div></div>
</div><div class="circle-clipper right">
<div class="half-circle"><div><div><div></div></div></div></div>
</div>
</div>
</div>
</div>
</body></html>