Skip to content

Commit 15cda63

Browse files
shdinxshdinx
authored
Add files via upload
1 parent 4b59391 commit 15cda63

File tree

1 file changed

+121
-0
lines changed

1 file changed

+121
-0
lines changed

‎setup/e360-spinner.html‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>email360 Spinner</title>
6+
<style type="text/css">
7+
8+
9+
10+
/* The Overlay (background) */
11+
.overlay {
12+
/* Height & width depends on how you want to reveal the overlay (see JS below) */
13+
height: 100%;
14+
width: 100%;
15+
position: fixed; /* Stay in place */
16+
z-index: 1; /* Sit on top */
17+
left: 0;
18+
top: 0;
19+
display: none;
20+
background-color: rgb(0,0,0); /* Black fallback color */
21+
background-color: rgba(0,0,0, 0.6); /* Black w/opacity */
22+
overflow-x: hidden; /* Disable horizontal scroll */
23+
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
24+
}
25+
26+
/* Position the content inside the overlay */
27+
.overlay-content {
28+
position: absolute;
29+
margin: auto;
30+
top: 0;
31+
right: 0;
32+
bottom: 0;
33+
left: 0;
34+
width: 250px;
35+
height: 100px;
36+
}
37+
38+
.loader {
39+
width: 48px;
40+
height: 48px;
41+
border: 5px solid #FFF;
42+
border-bottom-color: transparent;
43+
border-radius: 50%;
44+
display: inline-block;
45+
position: relative;
46+
box-sizing: border-box;
47+
animation: rotation 1s linear infinite;
48+
top: 5px;
49+
50+
}
51+
52+
.loader::after {
53+
content: '';
54+
position: absolute;
55+
box-sizing: border-box;
56+
top: 32px;
57+
left: 2px;
58+
border: 7px solid transparent;
59+
border-right-color: #FFF;
60+
transform: rotate(225deg);
61+
}
62+
63+
.loader:before {
64+
content: "";
65+
position: absolute;
66+
left: 50%;
67+
top: 45%;
68+
transform: translate(-50%, -50%);
69+
width: 20px;
70+
height: 20px;
71+
72+
}
73+
74+
@keyframes rotation {
75+
100% {
76+
transform: rotate(0deg);
77+
}
78+
79+
0% {
80+
transform: rotate(360deg);
81+
}
82+
83+
}
84+
85+
.logo {
86+
color: #FFF;
87+
display: inline-block;
88+
position: relative;
89+
font-family: Arial, Helvetica, sans-serif;
90+
font-size: 48px;
91+
letter-spacing: 4px;
92+
background-repeat: no-repeat;
93+
background-image: url("envelope.png");
94+
background-size: 20px 20px;
95+
background-position: 210px;
96+
}
97+
98+
.logo-o {
99+
color: rgb(255, 197, 80);
100+
}
101+
</style>
102+
<script type="text/javascript">
103+
/* Open */
104+
function openSpinner() {
105+
document.getElementById("process").style.display = "block";
106+
}
107+
</script>
108+
</head>
109+
110+
<body>
111+
<div id="process" class="overlay">
112+
<div class="overlay-content">
113+
<div class="row">
114+
<span class="logo">email<span class="logo-o">36</span><span class="loader"></span></span>
115+
</div>
116+
</div>
117+
</div>
118+
<span onclick="openSpinner()">open</span>
119+
</body>
120+
121+
</html>

0 commit comments

Comments
 (0)