SVG Circular Loader Using HTML and CSS

HTML

CSS

body {
            background: rgb(11, 8, 32);
            background: linear-gradient(322deg,
                    rgb(24, 6, 19) 20%,
                    rgb(37, 19, 78) 100%);
        }

.heading {
            color: #fff;
        }

.circleTitle {
            display: flex;
            justify-content: center;
            color: #f540f5;
            font-family: Poppins;
            user-select: none;
            text-shadow: 3px 3px black;
        }

.circleTitle-container {
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

.spinnerArea {
            display: flex;
            justify-content: center;
        }

svg {
            width: 50%;
            max-width: 10rem;
            animation: rotate 3.6s linear infinite;
        }

circle {
            fill: none;
            stroke: #9440f5;
            stroke-width: 8px;
            stroke-dasharray: 300;
            animation: circleOutline 2s cubic-bezier(0.77, 0, 0.18, 1) infinite;
        }

@keyframes circleOutline {
            0% {
                stroke-dashoffset: 0;
            }

50% {
                stroke-dashoffset: 300;
            }

100% {
                stroke-dashoffset: 600;
            }
        }

@keyframes rotate {
            from {
                transform: rotate(0turn);
            }

to {
                transform: rotate(-1turn);
            }
        }

Ui Code Snippets

SVG Circular Loader Using HTML and CSS

HTML

CSS

JS

Output

Network Marketing

SEO Course

Our Courses

Our Tutorials

Ui Code Snippets

Popular Notes

Ui Code Snippets

SVG Circular Loader Using HTML and CSS

HTML

CSS

JS

Output

Network Marketing

SEO Course