Animated Liquid Dots Loader 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;
        }

.animatedLiquidDots {
            border-radius: 50%;
            width: 16px;
            aspect-ratio: 1/1;
            background-color: #0094ff;
            position: relative;
            margin: auto;
            box-shadow: 32px 0px 0px 0px #0094ff, -32px 0px 0px 0px #0094ff;
        }

.animatedLiquidDots::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 50%;
            width: 16px;
            aspect-ratio: 1/1;
            background-color: #0094ff;
            animation: animatedLiquidDots 2s linear infinite;
        }

@keyframes animatedLiquidDots {
            0% {
                opacity: 0;
                transform: translateX(-32px) scale(1, 1);
            }

10% {
                opacity: 1;
                transform: translateX(-32px) scale(1, 1);
            }

20% {
                transform: translateX(-24px) scale(1.2, 0.8);
            }

30% {
                transform: translateX(-16px) scale(0.7, 0.7);
            }

40% {
                transform: translateX(-8px) scale(1.2, 0.7);
            }

50% {
                transform: translateX(0px) scale(1, 1);
            }

60% {
                transform: translateX(8px) scale(1.2, 0.7);
            }

70% {
                transform: translateX(16px) scale(0.7, 0.7);
            }

80% {
                transform: translateX(24px) scale(1.2, 0.8);
            }

90% {
                opacity: 1;
                transform: translateX(32px) scale(1, 1);
            }

100% {
                opacity: 0;
                transform: translateX(32px) scale(0.9, 0.9);
            }
        }

Ui Code Snippets

Animated Liquid Dots 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

Animated Liquid Dots Loader Using HTML and CSS

HTML

CSS

JS

Output

Network Marketing

SEO Course