1
2<!DOCTYPE html>
3<html lang="en" dir="ltr">
4 <head>
5 <meta charset="utf-8">
6 <title>Windows Loader | Md Abdur Rakib</title>
7 <style>
8 @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
9*{
10 margin: 0;
11 padding: 0;
12 box-sizing: border-box;
13}
14body{
15 display: flex;
16 align-items: center;
17 justify-content: center;
18 min-height: 100vh;
19 text-align: center;
20 background: #0079d7;
21}
22.container{
23 position: relative;
24 width: 100%;
25 display: flex;
26 justify-content: center;
27}
28.wrapper{
29 position: absolute;
30 top: -35px;
31 transform: scale(1.5);
32}
33.loader{
34 height: 25px;
35 width: 1px;
36 position: absolute;
37 animation: rotate 3.5s linear infinite;
38}
39.loader .dot{
40 top: 30px;
41 height: 7px;
42 width: 7px;
43 background: #fff;
44 border-radius: 50%;
45 position: relative;
46}
47.text{
48 position: absolute;
49 bottom: -85px;
50 font-size: 25px;
51 font-weight: 400;
52 font-family: 'Poppins',sans-serif;
53 color: #fff;
54}
55@keyframes rotate {
56 30%{
57 transform: rotate(220deg);
58 }
59 40%{
60 transform: rotate(450deg);
61 opacity: 1;
62 }
63 75%{
64 transform: rotate(720deg);
65 opacity: 1;
66 }
67 76%{
68 opacity: 0;
69 }
70 100%{
71 opacity: 0;
72 transform: rotate(0deg);
73 }
74}
75.loader:nth-child(1){
76 animation-delay: 0.15s;
77}
78.loader:nth-child(2){
79 animation-delay: 0.3s;
80}
81.loader:nth-child(3){
82 animation-delay: 0.45s;
83}
84.loader:nth-child(4){
85 animation-delay: 0.6s;
86}
87.loader:nth-child(5){
88 animation-delay: 0.75s;
89}
90.loader:nth-child(6){
91 animation-delay: 0.9s;
92}
93 </style>
94 </head>
95 <body>
96 <div class="container">
97 <div class="wrapper">
98 <div class="loader">
99 <div class="dot"></div>
100 </div>
101 <div class="loader">
102 <div class="dot"></div>
103 </div>
104 <div class="loader">
105 <div class="dot"></div>
106 </div>
107 <div class="loader">
108 <div class="dot"></div>
109 </div>
110 <div class="loader">
111 <div class="dot"></div>
112 </div>
113 <div class="loader">
114 <div class="dot"></div>
115 </div>
116 </div>
117 <div class="text">
118 Please wait
119 </div>
120 </div>
121 </body>
122</html>