Loader Overlay (CSS keyframes)

bysemicon -
0

 




CSS

     
     #page {
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(82, 79, 79, 0.342);
            overflow: hidden;
            z-index: 999;
            position: absolute;
        }

        #ring {
            width: 190px;
            height: 190px;
            border: 1px solid transparent;
            border-radius: 50%;
            position: absolute;
        }

        #ring:nth-child(1) {
            border-bottom: 8px solid rgb(240, 42, 230);
            animation: rotate1 2s linear infinite;
        }

        @keyframes rotate1 {
            from {
                transform: rotateX(50deg) rotateZ(110deg);
            }

            to {
                transform: rotateX(50deg) rotateZ(470deg);
            }
        }

        #ring:nth-child(2) {
            border-bottom: 8px solid rgb(255, 0, 0);
            animation: rotate2 2s linear infinite;
        }

        @keyframes rotate2 {
            from {
                transform: rotateX(20deg) rotateY(50deg) rotateZ(20deg);
            }

            to {
                transform: rotateX(20deg) rotateY(50deg) rotateZ(380deg);
            }
        }

        #ring:nth-child(3) {
            border-bottom: 8px solid rgb(0, 0, 255);
            animation: rotate3 2s linear infinite;
        }

        @keyframes rotate3 {
            from {
                transform: rotateX(40deg) rotateY(130deg) rotateZ(450deg);
            }

            to {
                transform: rotateX(40deg) rotateY(130deg) rotateZ(90deg);
            }
        }

        #ring:nth-child(4) {
            border-bottom: 8px solid rgb(0, 255, 0);
            animation: rotate4 2s linear infinite;
        }

        @keyframes rotate4 {
            from {
                transform: rotateX(70deg) rotateZ(270deg);
            }

            to {
                transform: rotateX(70deg) rotateZ(630deg);
            }
        }


HTML


     

    <div id="page">
        <div id="ring"></div>
        <div id="ring"></div>
        <div id="ring"></div>
        <div id="ring"></div>
        <div><img src="https://semicon.github.io/img/web/logoxxx.png" alt="logo" width="50"></div>
    </div>


ตัวอย่าง


     
<!DOCTYPE html>
<html>

<head>
    <title>Loader by dimasptrautmaa made with CSS | Uiverse.io</title>
    <style>
        body {
            height: 100%;
            width: 100%;
        }

        #page {
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(82, 79, 79, 0.342);
            overflow: hidden;
            z-index: 999;
            position: absolute;
        }

        #ring {
            width: 190px;
            height: 190px;
            border: 1px solid transparent;
            border-radius: 50%;
            position: absolute;
        }

        #ring:nth-child(1) {
            border-bottom: 8px solid rgb(240, 42, 230);
            animation: rotate1 2s linear infinite;
        }

        @keyframes rotate1 {
            from {
                transform: rotateX(50deg) rotateZ(110deg);
            }

            to {
                transform: rotateX(50deg) rotateZ(470deg);
            }
        }

        #ring:nth-child(2) {
            border-bottom: 8px solid rgb(255, 0, 0);
            animation: rotate2 2s linear infinite;
        }

        @keyframes rotate2 {
            from {
                transform: rotateX(20deg) rotateY(50deg) rotateZ(20deg);
            }

            to {
                transform: rotateX(20deg) rotateY(50deg) rotateZ(380deg);
            }
        }

        #ring:nth-child(3) {
            border-bottom: 8px solid rgb(0, 0, 255);
            animation: rotate3 2s linear infinite;
        }

        @keyframes rotate3 {
            from {
                transform: rotateX(40deg) rotateY(130deg) rotateZ(450deg);
            }

            to {
                transform: rotateX(40deg) rotateY(130deg) rotateZ(90deg);
            }
        }

        #ring:nth-child(4) {
            border-bottom: 8px solid rgb(0, 255, 0);
            animation: rotate4 2s linear infinite;
        }

        @keyframes rotate4 {
            from {
                transform: rotateX(70deg) rotateZ(270deg);
            }

            to {
                transform: rotateX(70deg) rotateZ(630deg);
            }
        }
    </style>
</head>

<body>
    
    <div id="page">
        <div id="ring"></div>
        <div id="ring"></div>
        <div id="ring"></div>
        <div id="ring"></div>
        <div><img src="https://semicon.github.io/img/web/logoxxx.png" alt="logo" width="50"></div>
    </div>
</body>

</html>

ที่มา : Loader by dimasptrautmaa made with CSS | Uiverse.io







Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า