Loader With Three Moving Lines Using HTML and CSS

HTML

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            height: 100vh;
            display: flex;
            justify-content: center;
            background-color: #000000;
        }

.mainHeading {
            color: #fff;
            text-align: center;
            margin-top:3rem;
        }

.mainDiv {
            position: relative;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 8rem;
        }

.mainDiv .eachRing {
            position: relative;
            width: 150px;
            height: 150px;
            margin: -30px;
            border-radius: 50%;
            border: 4px solid transparent;
            border-top: 4px solid #fffb24;
            animation: animate 4s linear infinite;
        }

@keyframes animate {
            0% {
                transform: rotate(0deg);
            }

100% {
                transform: rotate(360deg);
            }
        }

.mainDiv .eachRing::before {
            content: '';
            position: absolute;
            top: 12px;
            right: 12px;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            background: #fffb24;
            box-shadow: 0 0 0 5px #fffb2433,
                0 0 0 10px #fffb2422,
                0 0 0 20px #fffb2411,
                0 0 20px #fffb24,
                0 0 50px #fffb24;
        }

.mainDiv .eachRing:nth-child(2) {
            animation: animate2 4s linear infinite;
            animation-delay: -1s;
            border-top: 4px solid transparent;
            border-left: 4px solid #2ddfff;
        }

.mainDiv .eachRing:nth-child(2)::before {
            content: '';
            position: absolute;
            top: initial;
            bottom: 12px;
            left: 12px;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            background: #2ddfff;
            box-shadow: 0 0 0 5px #2ddfff33,
                0 0 0 10px #2ddfff22,
                0 0 0 20px #2ddfff11,
                0 0 20px #2ddfff,
                0 0 50px #2ddfff;
        }

@keyframes animate2 {
            0% {
                transform: rotate(360deg);
            }

100% {
                transform: rotate(0deg);
            }
        }

.mainDiv .eachRing:nth-child(3) {
            animation: animate2 4s linear infinite;
            animation-delay: -3s;
            position: absolute;
            top: -66.66px;
            border-top: 4px solid transparent;
            border-left: 4px solid #f81c9c;
        }

.mainDiv .eachRing:nth-child(3)::before {
            content: '';
            position: absolute;
            top: initial;
            bottom: 12px;
            left: 12px;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            background: #f81c9c;
            box-shadow: 0 0 0 5px #f81c9c33,
                0 0 0 10px #f81c9c22,
                0 0 0 20px #f81c9c11,
                0 0 20px #f81c9c,
                0 0 50px #f81c9c;
        }

.mainDiv p {
            position: absolute;
            color: #fff;
            font-size: 1.5em;
            font-family: consolas;
            bottom: -80px;
            letter-spacing: 0.15em;
        }

Ui Code Snippets

Loader With Three Moving Lines Using HTML and CSS

HTML

CSS

JS

Output

Network Marketing

SEO Course

Our Courses

Our Tutorials

Ui Code Snippets

Popular Notes

Ui Code Snippets

Loader With Three Moving Lines Using HTML and CSS

HTML

CSS

JS

Output

Network Marketing

SEO Course