|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sandglass</title>
<style>
@keyframes sandglass {
0% {
transform: rotate(0deg);
}
25%, 50% {
transform: rotate(180deg);
}
75%, 100% {
transform: rotate(360deg);
}
}
@keyframes bottom-sand {
0% {
transform: translateY(-30%);
}
50% {
transform: translateY(0%);
}
100% {
transform: translateY(30%);
}
}
@keyframes top-sand {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(-30%);
}
51% {
transform: translateY(-30%) translateX(100%);
}
52% {
transform: translateY(30%) translateX(100%);
}
53% {
transform: translateY(30%);
}
100% {
transform: translateY(0%);
}
}
@keyframes point {
0% {
opacity: 1;
}
50% {
opacity: .2;
}
100% {
opacity: 1;
}
}
.sandglass {
transform-origin: 0 0;
animation: sandglass 5s cubic-bezier(0.075, 0.82, 0.165, 1) infinite;
}
.bottom-sand {
transform-origin: 0 0;
animation: bottom-sand 5s ease-in-out infinite;
}
.top-sand {
transform-origin: 0 0;
animation: top-sand 5s ease-in-out infinite;
}
.label {
padding: 3rem;
padding-top: 0;
}
.point{
animation-name: point;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<div style="width:800px;margin:auto;text-align:center;background:#222;">
<svg style="height:300px;" viewBox="-75 -75 150 150">
<defs>
<clipPath id="top">
<path d="M 0,2.4882812 -28.052734,30.541016 V 46.480469 H 28.052734 V 30.541016 Z" />
</clipPath>
<clipPath id="top-sand">
<path class="top-sand" d="M 0,2.4882812 -28.052734,30.541016 V 46.480469 H 28.052734 V 30.541016 Z" />
</clipPath>
<clipPath id="bottom">
<path d="m -28.052734,-46.480469 v 15.939453 L 0,-2.4882812 28.052734,-30.541016 v -15.939453 z" />
</clipPath>
<clipPath id="bottom-sand">
<path class="bottom-sand" d="m -28.052734,-46.480469 v 15.939453 L 0,-2.4882812 28.052734,-30.541016 v -15.939453 z" />
</clipPath>
</defs>
<g class="sandglass">
<path fill="#fff" d="m -29.8125,-50 a 1.75945,1.75945 0 0 0 -1.759766,1.759766 V -29.8125 a 1.7596259,1.7596259 0 0 0 0.515625,1.244141 L -2.488281,1.1402179e-8 -31.056641,28.568359 A 1.7596259,1.7596259 0 0 0 -31.572266,29.8125 V 48.240234 A 1.7596259,1.7596259 0 0 0 -29.8125,50 h 59.625 a 1.7596259,1.7596259 0 0 0 1.759766,-1.759766 V 29.8125 A 1.7596259,1.7596259 0 0 0 31.056641,28.568359 L 2.488281,1.1402179e-8 31.056641,-28.568359 A 1.7596259,1.7596259 0 0 0 31.572266,-29.8125 V -48.240234 A 1.7596259,1.7596259 0 0 0 29.8125,-50 Z m 1.759766,3.519531 h 56.105468 v 15.939453 L 1.1366282e-8,-2.488281 -28.052734,-30.541016 Z M 1.1366282e-8,2.488281 28.052734,30.541016 V 46.480469 H -28.052734 V 30.541016 Z" />
<g clip-path="url(#bottom)">
<g clip-path="url(#bottom-sand)">
<rect fill="#fff" x="-75" y="-75" width="150" height="150" />
</g>
</g>
<g clip-path="url(#top)">
<g clip-path="url(#top-sand)">
<rect fill="#fff" x="-75" y="-75" width="150" height="150" />
</g>
</g>
</g>
</svg>
<h2 class="label">loading
<span class="point" style="animation-delay:.25s;">.</span>
<span class="point" style="animation-delay:.5s;">.</span>
<span class="point" style="animation-delay:.75s;">.</span>
</h2>
</div>
</body>
</html>
|