Windows Preloader using HTML & CSS
The Windows Style Loader is a visually appealing and smooth animated loader inspired by Microsoft's Windows operating system loading animations. It consists of multiple dots rotating around a center point, providing users with a clean indication that content or an action is currently being processed.
Advantages and Benefits
- Clean and Minimalistic Design: The loader uses simple dots with smooth rotation, making it elegant and non-distracting.
- High Visibility: The white dots on a blue background provide excellent contrast and are easy to notice.
- Lightweight: It is built purely with HTML and CSS animations, so it loads fast and does not require any JavaScript libraries.
- Scalable and Customizable: Easily modify colors, sizes, and animation speeds to match your brand style.
- Cross-Browser Compatibility: Uses standard CSS animations supported in all modern browsers.
- Improves User Experience: Indicates to users that a process is running, reducing frustration or confusion during wait times.
Where Can It Be Used?
- Loading screens in web applications or websites.
- During API calls, data fetching, or long-running tasks.
- On login or signup forms to indicate authentication is in process.
- In dashboards or admin panels while loading data.
- Anywhere a subtle yet effective loading indicator is needed.
Full Code Example
You can copy and paste the following code to implement the Windows Style Loader in your project. The code is separated into HTML and CSS sections.
HTML Code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Windows Loader</title>
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="loader"><div class="dot"></div></div>
<div class="loader"><div class="dot"></div></div>
<div class="loader"><div class="dot"></div></div>
<div class="loader"><div class="dot"></div></div>
<div class="loader"><div class="dot"></div></div>
<div class="loader"><div class="dot"></div></div>
</div>
<div class="text">Please wait</div>
</div>
</body>
</html>
CSS Code (style.css)
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
text-align: center;
background: #0079d7;
}
.container {
position: relative;
width: 100%;
display: flex;
justify-content: center;
}
.wrapper {
position: absolute;
top: -35px;
transform: scale(1.5);
}
.loader {
height: 25px;
width: 1px;
position: absolute;
animation: rotate 3.5s linear infinite;
}
.loader .dot {
top: 30px;
height: 7px;
width: 7px;
background: #fff;
border-radius: 50%;
position: relative;
}
.text {
position: absolute;
bottom: -85px;
font-size: 25px;
font-weight: 400;
font-family: 'Poppins', sans-serif;
color: #fff;
}
@keyframes rotate {
30% {
transform: rotate(220deg);
}
40% {
transform: rotate(450deg);
opacity: 1;
}
75% {
transform: rotate(720deg);
opacity: 1;
}
76% {
opacity: 0;
}
100% {
opacity: 0;
transform: rotate(0deg);
}
}
.loader:nth-child(1) {
animation-delay: 0.15s;
}
.loader:nth-child(2) {
animation-delay: 0.3s;
}
.loader:nth-child(3) {
animation-delay: 0.45s;
}
.loader:nth-child(4) {
animation-delay: 0.6s;
}
.loader:nth-child(5) {
animation-delay: 0.75s;
}
.loader:nth-child(6) {
animation-delay: 0.9s;
}
Demo
Please click the button below to view the demo.
By integrating this Windows Style Loader, you enhance your website’s professionalism and provide users with a smooth, recognizable visual cue that something is loading. The minimalistic approach keeps the focus on your content while ensuring a better user experience during wait times.
