You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
2.7 KiB
104 lines
2.7 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8" /> |
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
|
<meta name="renderer" content="webkit" /> |
|
<meta |
|
name="viewport" |
|
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" |
|
/> |
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico" /> |
|
<title><%= webpackConfig.name %></title> |
|
<!--[if lt IE 11 |
|
]><script> |
|
window.location.href = "/html/ie.html"; |
|
</script><! |
|
[endif]--> |
|
<style> |
|
html, |
|
body, |
|
#app { |
|
height: 100%; |
|
margin: 0px; |
|
padding: 0px; |
|
} |
|
#loader-wrapper { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
z-index: 999999; |
|
background: #002249; |
|
} |
|
|
|
#loader { |
|
display: block; |
|
position: relative; |
|
left: calc(50% - 8 * var(--s)); |
|
top: calc(50% - 8 * var(--s)); |
|
z-index: 1001; |
|
/* css变量 环的宽度 */ |
|
--s: 10px; |
|
width: calc(16 * var(--s)); |
|
height: calc(16 * var(--s)); |
|
border-radius: 50%; |
|
/* 网格布局 */ |
|
display: grid; |
|
/* 渐变蒙版 */ |
|
-webkit-mask: radial-gradient( |
|
50% 50%, |
|
#0000 calc(99% - 2 * var(--s)), |
|
#000 calc(100% - 2 * var(--s)) |
|
); |
|
/* 执行动画：动画名 时长 线性 循环播放 */ |
|
animation: spin 3s linear infinite; |
|
} |
|
#loader::before { |
|
content: ""; |
|
/* 圆锥渐变 */ |
|
background: conic-gradient( |
|
from 25deg, |
|
#70a1d7 25%, |
|
#a1de93 0 50%, |
|
#f7f48b 0 75%, |
|
#f47c7c 0 |
|
); |
|
/* 渐变蒙版 */ |
|
-webkit-mask: repeating-conic-gradient(#0000 0 25deg, #000 23% 25%), |
|
radial-gradient(var(--s) at var(--s) 50%, #000 97%, #0000) |
|
left/calc(100% - 2 * var(--s)) 100% repeat-x, |
|
radial-gradient(var(--s) at 50% var(--s), #000 97%, #0000) top/100% |
|
calc(100% - 2 * var(--s)) repeat-y; |
|
} |
|
/* 定义动画 */ |
|
@keyframes spin { |
|
to { |
|
/* 旋转一周 */ |
|
transform: rotate(1turn); |
|
} |
|
} |
|
#loader-wrapper .load_title { |
|
font-family: "Open Sans"; |
|
color: #fff; |
|
font-size: 19px; |
|
width: 100%; |
|
text-align: center; |
|
z-index: 9999999999999; |
|
position: absolute; |
|
top: 62%; |
|
opacity: 1; |
|
line-height: 30px; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div id="app"> |
|
<div id="loader-wrapper"> |
|
<div id="loader"></div> |
|
<div class="load_title">正在加载最新内容，稍等片刻...</div> |
|
</div> |
|
</div> |
|
</body> |
|
</html>
|
|
|