windows preloader

Solutions on MaxInterview for windows preloader by the best coders in the world

showing results for - "windows preloader"
10 Jul 2019
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>
source