/
loading.html
65 lines (59 loc) · 2.07 KB
/
loading.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head>
<title>Loading...</title>
</head>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 560 560" style="enable-background:new 0 0 560 560;" xml:space="preserve">
<style type="text/css">
.st0{fill:transparent;}
.st1{fill:#6BA539;}
.st2{fill:#005F83;}
.st3{fill:#FFB81C;}
.st4{fill:#FFFFFF;}
.st5{fill:none;}
@keyframes loading{
0% {
transition: .3s;}
25% {transform: rotateY(180deg);
transition: .3s;}
50% {transform: rotate(90deg);
transition: .3s;}
75% {transform: rotateY(90deg);
transition: .3s;}
100% {transform: rotate(0deg);
transition: .3s;}
}
svg{background-color: #E6E6E6;}
#background{ height: 100vh; }
#container{
transform-origin: center;
animation-name: loading;
animation-duration: 4s;
transition: .3s;
animation-iteration-count: infinite;
}
#center path{
transform-origin: center;
transition: .5s;
}
#center path:hover{ transform: rotate(180deg); }
#center path:active{ transform: rotate(180deg); }
</style>
<rect id="background" x="0" y="0" class="st0" width="560" height="560"/>
<g id="container">
<g id="center">
<path id="XMLID_1_" class="st1" d="M269.6,319h-18.2c-5.7,0-10.4-4.7-10.4-10.4v-18.2c0-5.7,4.7-10.4,10.4-10.4h18.2
c5.7,0,10.4,4.7,10.4,10.4v18.2C280,314.3,275.3,319,269.6,319z"/>
<path id="XMLID_4_" class="st2" d="M269.6,280h-18.2c-5.7,0-10.4-4.7-10.4-10.4v-18.2c0-5.7,4.7-10.4,10.4-10.4h18.2
c5.7,0,10.4,4.7,10.4,10.4v18.2C280,275.3,275.3,280,269.6,280z"/>
<path id="XMLID_7_" class="st3" d="M308.6,319h-18.2c-5.7,0-10.4-4.7-10.4-10.4v-18.2c0-5.7,4.7-10.4,10.4-10.4h18.2
c5.7,0,10.4,4.7,10.4,10.4v18.2C319,314.3,314.3,319,308.6,319z"/>
<path id="XMLID_5_" class="st4" d="M308.6,280h-18.2c-5.7,0-10.4-4.7-10.4-10.4v-18.2c0-5.7,4.7-10.4,10.4-10.4h18.2
c5.7,0,10.4,4.7,10.4,10.4v18.2C319,275.3,314.3,280,308.6,280z"/>
</g>
<rect id="rectangel" x="216.8" y="217.5" class="st5" width="126.3" height="126.3"/>
</g>
</svg>
</body>
</html>