|
|
@@ -44,8 +44,42 @@
|
|
|
}
|
|
|
|
|
|
.app-loading .app-loading-logo {
|
|
|
- width: 100px;
|
|
|
- margin: 0 auto 15px auto;
|
|
|
+ position: relative;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 118px;
|
|
|
+ height: 118px;
|
|
|
+ margin: 0 auto 18px auto;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: radial-gradient(
|
|
|
+ circle at top,
|
|
|
+ rgb(255 255 255 / 90%) 0%,
|
|
|
+ rgb(235 245 255 / 80%) 60%,
|
|
|
+ rgb(105 162 255 / 12%) 100%
|
|
|
+ );
|
|
|
+ box-shadow: 0 14px 42px rgb(45 140 240 / 16%);
|
|
|
+ animation: logo-breathe 1.6s ease-in-out infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-loading .app-loading-logo::before {
|
|
|
+ position: absolute;
|
|
|
+ inset: -8px;
|
|
|
+ content: '';
|
|
|
+ border: 2px solid rgb(45 140 240 / 24%);
|
|
|
+ border-top-color: #2d8cf0;
|
|
|
+ border-right-color: transparent;
|
|
|
+ border-radius: 50%;
|
|
|
+ animation: logo-spin 1.2s linear infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-loading .app-loading-logo img {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ width: 88px;
|
|
|
+ height: 88px;
|
|
|
+ object-fit: contain;
|
|
|
+ animation: logo-rotate 1.4s linear infinite;
|
|
|
}
|
|
|
|
|
|
.app-loading .app-loading-item {
|
|
|
@@ -129,6 +163,39 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ @keyframes logo-spin {
|
|
|
+ from {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes logo-breathe {
|
|
|
+ 0%,
|
|
|
+ 100% {
|
|
|
+ transform: scale(1);
|
|
|
+ opacity: 0.95;
|
|
|
+ }
|
|
|
+
|
|
|
+ 50% {
|
|
|
+ transform: scale(1.04);
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes logo-rotate {
|
|
|
+ from {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
/* From Uiverse.io by Juanes200122 */
|
|
|
#svg-global {
|
|
|
zoom: 1.2;
|
|
|
@@ -236,7 +303,7 @@
|
|
|
<div class="app-loading-wrap">
|
|
|
<div class="app-loading-title">
|
|
|
<!-- From Uiverse.io by Juanes200122 -->
|
|
|
- <svg
|
|
|
+ <!-- <svg
|
|
|
id="svg-global"
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
fill="none"
|
|
|
@@ -576,7 +643,11 @@
|
|
|
<stop stop-opacity="0" stop-color="white" offset="1"></stop>
|
|
|
</linearGradient>
|
|
|
</defs>
|
|
|
- </svg>
|
|
|
+ </svg> -->
|
|
|
+
|
|
|
+ <div class="app-loading-logo">
|
|
|
+ <img src="./src/assets/imgs/logo.png" alt="logo" />
|
|
|
+ </div>
|
|
|
|
|
|
<div class="app-loading-title">%VITE_APP_TITLE%</div>
|
|
|
</div>
|
