HTML and CSS Loading Spinner

HTML

CSS

Output

HTML Copied

CSS Copied

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

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

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

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

div.circularLloader {
            animation: rotateAnimation 2s infinite ease;
            margin: auto;
            width: 40px;
            height: 40px;
            border: 4px solid #CCE6F4;
            border-top-color: #003844;
            border-right-color: #FFB100;
            border-bottom-color: #006C67;
            border-left-color: #F194B4;
            border-radius: 50%;
        }

/* animations */
        @keyframes rotateAnimation {
            0% {
                transform: rotate(0deg);
            }

10% {
                transform: rotate(-45deg);
            }

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

HTML and CSS Loading Spinner

JS Copied

Output