Colorfull Loading Spinner Using HTML and CSS

HTML

CSS

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

body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

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

.mainDiv {
            display: flex;
            justify-content: center;
            margin-top: 1rem;
        }

.spinner-div {
            box-sizing: border-box;
            position: relative;
            margin: auto;
            width: 128px;
            aspect-ratio: 1/1;
            border-radius: 50%;
            border: 16px solid transparent;
            border-top-color: #006eff;
            border-bottom-color: #00ff55;
            transform: rotateZ(-45deg);
            animation: SuperSpinerAnimation 5s linear infinite;
        }

.spinner-div::after {
            box-sizing: border-box;
            content: "";
            position: absolute;
            inset: -16px;
            aspect-ratio: 1/1;
            border-radius: 50%;
            border: 16px solid transparent;
            border-right-color: #6f00ff;
            border-left-color: #00f7ff;
            animation: SuperSpinerAnimation 5s linear infinite;
        }

@keyframes SuperSpinerAnimation {
            0% {
                transform: rotateZ(0deg);
            }

25% {
                transform: rotateZ(360deg);
            }

75% {
                transform: rotateZ(720deg);
            }

100% {
                transform: rotateZ(1080deg);
            }
        }

Ui Code Snippets

Colorfull Loading Spinner Using HTML and CSS

HTML

CSS

JS

Output

Network Marketing

SEO Course

Our Courses

Our Tutorials

Ui Code Snippets

Popular Notes

Ui Code Snippets

Colorfull Loading Spinner Using HTML and CSS

HTML

CSS

JS

Output

Network Marketing

SEO Course