-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathspa-loading-template.html
64 lines (63 loc) · 4.2 KB
/
spa-loading-template.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
<!-- https://github.com/barelyhuman/snips/blob/dev/pages/css-loader.md -->
<svg viewBox="0 0 53 32" xmlns="http://www.w3.org/2000/svg" class="logo">
<g>
<path
d="M11.8918 11.8951C11.1684 11.8951 10.4732 12.0169 9.82186 12.2378C9.81504 12.2398 9.80823 12.2428 9.80141 12.2448C9.5288 12.3637 9.337 12.6311 9.31558 12.9462C9.3146 12.965 9.30974 12.9828 9.30974 13.0017C9.30974 13.0205 9.31363 13.0383 9.31558 13.0571V16.4493C9.92117 15.6815 10.849 15.1891 11.8918 15.1891C13.7163 15.1891 15.1953 16.694 15.1953 18.5506C15.1953 20.4071 13.7163 21.912 11.8918 21.912C10.0672 21.912 8.58829 20.4071 8.58829 18.5506V5.57935H5.34906C2.3951 5.57935 0 7.86984 0 10.6953C0 12.9224 1.82164 14.6839 2.13514 15.7935C2.33084 16.484 2.13028 17.8601 2.0261 18.1077C2.26269 17.7749 3.10876 17.0645 3.10876 15.2941C3.10876 13.9517 2.362 12.858 2.36881 11.5443C2.36881 9.97012 3.70364 8.87738 5.34906 8.87738V18.5526C5.34906 22.229 8.27868 25.21 11.8918 25.21C15.5049 25.21 18.4345 22.23 18.4345 18.5526C18.4345 14.8751 15.5049 11.8951 11.8918 11.8951Z"
fill="currentColor"
/>
<path
d="M30.4775 11.8641C29.2507 11.8641 28.1291 12.3238 27.2694 13.0817C26.4087 12.3238 25.2881 11.8641 24.0613 11.8641C21.3518 11.8641 19.1543 14.0992 19.1543 16.8573V25.2089H21.7441C22.1696 25.2089 22.5152 24.873 22.5474 24.449C22.5493 24.4272 22.5532 24.4074 22.5532 24.3856C22.5532 24.3638 22.5483 24.343 22.5474 24.3222V16.8573C22.5474 16.0072 23.225 15.3177 24.0604 15.3177C24.8957 15.3177 25.5519 15.9874 25.5714 16.8196C25.5714 16.8325 25.5714 16.8444 25.5714 16.8573C25.5714 16.8701 25.5714 16.882 25.5714 16.8949C25.5714 16.9207 25.5724 16.9454 25.5734 16.9702V25.2089H28.1583C28.6003 25.2089 28.9586 24.8482 28.9664 24.4004C28.9664 24.3955 28.9684 24.3905 28.9684 24.3856C28.9684 24.3806 28.9674 24.3757 28.9664 24.3707V16.8573C28.9664 16.8444 28.9664 16.8325 28.9664 16.8196C28.9859 15.9864 29.6548 15.3177 30.4775 15.3177C31.3002 15.3177 31.9905 16.0072 31.9905 16.8573V25.2089H34.4274C34.4752 25.2178 34.5238 25.2237 34.5735 25.2237C34.6231 25.2237 34.6728 25.2178 34.7195 25.2089C35.0963 25.1385 35.3826 24.8037 35.3826 24.4004V16.8573C35.3826 14.1001 33.1861 11.8641 30.4765 11.8641H30.4775Z"
fill="currentColor"
/>
<path
d="M47.6064 11.8641C46.3786 11.8641 45.258 12.3238 44.3983 13.0817C43.5376 12.3238 42.417 11.8641 41.1893 11.8641C38.4797 11.8641 36.2832 14.0992 36.2832 16.8573V25.2089H38.873C39.2985 25.2089 39.6441 24.873 39.6763 24.449C39.6782 24.4272 39.6821 24.4074 39.6821 24.3856C39.6821 24.3638 39.6772 24.343 39.6763 24.3222V16.8573C39.6763 16.0072 40.3539 15.3177 41.1893 15.3177C42.0246 15.3177 42.6808 15.9874 42.7003 16.8196C42.7003 16.8325 42.7003 16.8444 42.7003 16.8573C42.7003 16.8701 42.7003 16.882 42.7003 16.8949C42.7003 16.9207 42.7013 16.9454 42.7023 16.9702V25.2089H45.2872C45.7292 25.2089 46.0875 24.8482 46.0953 24.4004C46.0953 24.3955 46.0963 24.3905 46.0963 24.3856C46.0963 24.3806 46.0953 24.3757 46.0953 24.3707V16.8573C46.0953 16.8444 46.0953 16.8325 46.0944 16.8196C46.1148 15.9864 46.7827 15.3177 47.6054 15.3177C48.4281 15.3177 49.1184 16.0072 49.1184 16.8573V25.2089H51.5554C51.6031 25.2178 51.6518 25.2237 51.7014 25.2237C51.7511 25.2237 51.7998 25.2178 51.8475 25.2089C52.2243 25.1385 52.5105 24.8037 52.5105 24.4004V16.8573C52.5105 14.1001 50.314 11.8641 47.6044 11.8641H47.6064Z"
fill="currentColor"
/>
</g>
</svg>
<div class="loader"></div>
<style>
.loader,
.logo {
display: block;
position: fixed;
z-index: 1031;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo {
margin-top: -15px;
width: 80px;
}
.loader {
margin-top: 15px;
width: 18px;
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: #101010;
border-left-color: #101010;
border-bottom-color: #efefef;
border-right-color: #efefef;
border-radius: 50%;
-webkit-animation: loader 400ms linear infinite;
animation: loader 400ms linear infinite;
}
@-webkit-keyframes loader {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes loader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>