<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/assets/images/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Easy life</title>
<style type="text/css">
#Loading {
width: 100vw;
height: 100vh;
top: 50%;
left: 50%;
position: absolute;
transform: translateY(-50%) translateX(-50%);
z-index: 100;
filter: contrast(20);
background: #fff;
display: flex;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
}
.breeding-rhombus-spinner {
height: 65px;
width: 65px;
position: relative;
transform: rotate(45deg) scale(1.5);
}
.breeding-rhombus-spinner,
.breeding-rhombus-spinner * {
box-sizing: border-box;
filter: blur(2px);
}
.breeding-rhombus-spinner .rhombus {
height: calc(65px / 7.5);
width: calc(65px / 7.5);
top: calc(65px / 2.3077);
left: calc(65px / 2.3077);
background-color: #e31937;
position: absolute;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.breeding-rhombus-spinner .rhombus:nth-child(2n) {
margin-right: 0;
}
.breeding-rhombus-spinner .rhombus.child-1 {
animation-name: breeding-rhombus-spinner-animation-child-1;
animation-delay: calc(100ms * 1);
}
.breeding-rhombus-spinner .rhombus.child-2 {
animation-name: breeding-rhombus-spinner-animation-child-2;
animation-delay: calc(100ms * 2);
}
.breeding-rhombus-spinner .rhombus.child-3 {
animation-name: breeding-rhombus-spinner-animation-child-3;
animation-delay: calc(100ms * 3);
}
.breeding-rhombus-spinner .rhombus.child-4 {
animation-name: breeding-rhombus-spinner-animation-child-4;
animation-delay: calc(100ms * 4);
}
.breeding-rhombus-spinner .rhombus.child-5 {
animation-name: breeding-rhombus-spinner-animation-child-5;
animation-delay: calc(100ms * 5);
}
.breeding-rhombus-spinner .rhombus.child-6 {
animation-name: breeding-rhombus-spinner-animation-child-6;
animation-delay: calc(100ms * 6);
}
.breeding-rhombus-spinner .rhombus.child-7 {
animation-name: breeding-rhombus-spinner-animation-child-7;
animation-delay: calc(100ms * 7);
}
.breeding-rhombus-spinner .rhombus.child-8 {
animation-name: breeding-rhombus-spinner-animation-child-8;
animation-delay: calc(100ms * 8);
}
.breeding-rhombus-spinner .rhombus.big {
height: calc(65px / 3);
width: calc(65px / 3);
top: calc(65px / 3);
left: calc(65px / 3);
background-color: #e31937;
animation-duration: 2s;
animation: breeding-rhombus-spinner-animation-child-big 2s infinite;
animation-delay: 0.5s;
}
@keyframes breeding-rhombus-spinner-animation-child-1 {
50% {
transform: translate(-325%, -325%);
}
}
@keyframes breeding-rhombus-spinner-animation-child-2 {
50% {
transform: translate(0, -325%);
}
}
@keyframes breeding-rhombus-spinner-animation-child-3 {
50% {
transform: translate(325%, -325%);
}
}
@keyframes breeding-rhombus-spinner-animation-child-4 {
50% {
transform: translate(325%, 0);
}
}
@keyframes breeding-rhombus-spinner-animation-child-5 {
50% {
transform: translate(325%, 325%);
}
}
@keyframes breeding-rhombus-spinner-animation-child-6 {
50% {
transform: translate(0, 325%);
}
}
@keyframes breeding-rhombus-spinner-animation-child-7 {
50% {
transform: translate(-325%, 325%);
}
}
@keyframes breeding-rhombus-spinner-animation-child-8 {
50% {
transform: translate(-325%, 0);
}
}
@keyframes breeding-rhombus-spinner-animation-child-big {
50% {
transform: scale(0.5);
}
}
</style>
</head>
<body>
<div id="Loading">
<div class="breeding-rhombus-spinner">
<div class="rhombus child-1"></div>
<div class="rhombus child-2"></div>
<div class="rhombus child-3"></div>
<div class="rhombus child-4"></div>
<div class="rhombus child-5"></div>
<div class="rhombus child-6"></div>
<div class="rhombus child-7"></div>
<div class="rhombus child-8"></div>
<div class="rhombus big"></div>
</div>
</div>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
</body>
</html>