<!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;
|
}
|
.chromeframe {
|
margin: 0.2em 0;
|
background: #ccc;
|
color: #000;
|
padding: 0.2em 0;
|
}
|
|
.loader {
|
width: 150px; /* 原来的50px * 3 */
|
aspect-ratio: 1; /* 保持宽高比 */
|
color: #54f3f3;
|
--_c: no-repeat radial-gradient(farthest-side, currentColor 92%, #0000);
|
background:
|
var(--_c) 50% 0 / 36px 36px, /* 原来的12px * 3 */
|
var(--_c) 50% 100% / 36px 36px,
|
var(--_c) 100% 50% / 36px 36px,
|
var(--_c) 0 50% / 36px 36px,
|
var(--_c) 50% 50% / 36px 36px,
|
conic-gradient(from 90deg at 12px 12px, #0000 90deg, currentColor 0)
|
-12px -12px / calc(150% + 6px) calc(150% + 6px); /* 调整中心点和尺寸 */
|
animation: l8 1s infinite linear;
|
}
|
@keyframes l8 {to{transform: rotate(.5turn)}}
|
</style>
|
</head>
|
<body>
|
<div id="app">
|
<div style="display: flex;justify-content: center;align-items: center;height: 100%">
|
<div class="loader"></div>
|
</div>
|
</div>
|
</body>
|
</html>
|
