SVG Type Color Changing Animation Loader

HTML

CSS

Output

HTML

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>SVG Type Color Changing Animation Loader</title>

</head>

<body>
 <section>
 <h1 class="mainHeading">SVG Type Color Changing Animation Loader</h1>
 <div class="main-loader-div">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 </div>
</body>

</html>

CSS

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

.mainHeading {
            color: rgb(6, 2, 114);
            text-align: center;
            padding: 3rem;
        }

section {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            min-height: 100vh;
            animation: animationBackground 1s linear infinite;
        }

@keyframes animationBackground {
            0% {
                filter: hue-rotate(0deg);
            }

100% {
                filter: hue-rotate(360deg);
            }
        }

section .main-loader-div {
            position: relative;
            width: 70px;
            height: 70px;
        }

section .main-loader-div span {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: rotate(calc(20deg * var(--iVar)));
        }

section .main-loader-div span::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 8px;
            height: 18px;
            border-radius: 60%;
            background: #ff0000;

animation: aniName 1s linear infinite;
            animation-delay: calc(0.1s * var(--iVar));
        }

@keyframes aniName {
            0% {
                transform: scale(1);
            }

80%,
            100% {
                transform: scale(0);
            }
        }

Ui Code Snippets

SVG Type Color Changing Animation Loader

HTML

CSS

JS

Output

Network Marketing

SEO Course

Our Courses

Our Tutorials

Ui Code Snippets

Popular Notes

Ui Code Snippets

SVG Type Color Changing Animation Loader

HTML

CSS

JS

Output

Network Marketing

SEO Course