Create Tial Wizards Animated Loader in HTML & CSS
TailWizards Animated Loader is a colorful, rotating dot loader inspired by Google's classic loading animations. It offers an engaging experience to users while waiting for content or data to load.
Benefits of Using TailWizards Loader
- Minimal & Lightweight: Pure HTML & CSS, no external libraries.
- Attractive Animation: Smooth orbit animation mimics a professional app feel.
- Easy to Customize: Color, size, and speed can be tweaked easily.
- Cross-browser Compatible: Runs smoothly on all major modern browsers.
- Responsive: Looks great on any screen size.
Common Use Cases
- Loading dashboards or analytics data.
- Single Page Application route changes.
- Form or file submission feedback.
- Displaying a preloader on landing pages.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TailWizards Dots Loader</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="tailwizards-loader">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
CSS Code (style.css)
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #fff;
}
.tailwizards-loader {
position: relative;
width: 80px;
height: 80px;
}
.tailwizards-loader span {
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
animation: orbit 1s linear infinite;
}
.tailwizards-loader span:nth-child(1) {
background: #4285f4; /* Blue */
animation-delay: 0s;
}
.tailwizards-loader span:nth-child(2) {
background: #ea4335; /* Red */
animation-delay: 0.25s;
}
.tailwizards-loader span:nth-child(3) {
background: #fbbc05; /* Yellow */
animation-delay: 0.5s;
}
.tailwizards-loader span:nth-child(4) {
background: #34a853; /* Green */
animation-delay: 0.75s;
}
@keyframes orbit {
0% {
transform: rotate(0deg) translateX(30px) rotate(0deg);
opacity: 0;
}
25% {
opacity: 1;
}
100% {
transform: rotate(360deg) translateX(30px) rotate(-360deg);
opacity: 0;
}
}
Demo
Please click the button below to view the demo.
Conclusion
The TailWizards Animated Loader offers a sleek, modern UI component that improves user interaction and keeps users visually engaged during loading processes. Inspired by Google’s familiar UI language, it’s ideal for developers building intuitive and attractive web apps.
