vue-cli-plugin-vusion
Version:
Vue CLI Plugin for Vusion Projects
45 lines (40 loc) • 1.7 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
body, div[root-app], div[root-app] > div[class^=l-dashboard__] { min-height: calc(100vh - 200px);}
@keyframes dash {
0% {
stroke-dasharray: 0, 1000;
stroke-dashoffset: -111;
}
40% {
stroke-dasharray: 45, 1000;
}
80% {
stroke-dasharray: 0, 1000;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 0, 1000;
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<div id="loading" style="background: #121319; height:100vh; position:relative;">
<div style="display: inline-block;vertical-align: middle;position: absolute;width:48px;height:48px;top:calc(50% - 24px);left:calc(50% - 24px);">
<svg style="width:100%;height:100%;" viewBox="0 0 40 40">
<g transform="translate(20, 20) scale(-1,1) rotate(-90)">
<circle style="stroke-linecap: round;stroke-width: 4px;stroke: #dae1e6;fill: none;stroke-dasharray: 0, 1000;stroke-dashoffset: 0;animation: dash 1.5s cubic-bezier(0.12, 0.6, 0.55, 1) infinite;" cx="0" cy="0" r="18"></circle>
</g>
</svg>
</div>
</div>
<div id="app"></div>
</body>
</html>