|
|
@@ -18,10 +18,6 @@
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
- .load-wrap img {
|
|
|
- width: 80px;
|
|
|
- height: auto;
|
|
|
- }
|
|
|
.load-wrap div:nth-child(3) {
|
|
|
align-items: flex-start;
|
|
|
}
|
|
|
@@ -33,14 +29,60 @@
|
|
|
font-weight: 600;
|
|
|
font-family: sans-serif;
|
|
|
}
|
|
|
+ .page-process {
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+ .loader {
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ border: 3px dotted #fff;
|
|
|
+ border-style: solid solid dotted dotted;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: inline-block;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ animation: rotation 2s linear infinite;
|
|
|
+ }
|
|
|
+ .loader::after {
|
|
|
+ content: "";
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ margin: auto;
|
|
|
+ border: 3px dotted #15bec8;
|
|
|
+ border-style: solid solid dotted;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ border-radius: 50%;
|
|
|
+ animation: rotationBack 1s linear infinite;
|
|
|
+ transform-origin: center center;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes rotation {
|
|
|
+ 0% {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @keyframes rotationBack {
|
|
|
+ 0% {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: rotate(-360deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="root">
|
|
|
<div class="load-wrap">
|
|
|
- <div>
|
|
|
- <img src="/src/assets/infinite-spinner.svg" />
|
|
|
- </div>
|
|
|
+ <div class="loader"></div>
|
|
|
<div>
|
|
|
<div id="page-process" class="page-process">0%</div>
|
|
|
</div>
|
gemercheung