当前位置：网站首页>Rotating hourglass in loading

Rotating hourglass in loading

2022-06-13 12:19:00 【Nebula】

Oh, the picture is lost 

<!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>
原网站

版权声明
本文为[Nebula]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/164/202206131208217604.html

边栏推荐

猜你喜欢

随机推荐