jlzhou
/
project-admin-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改启动加载动画和图标

Browse Source
master
管理员 3 years ago
parent 065322f908
commit 9375ad772a
3 changed files with 97 additions and 179 deletions
Show Stats Download Patch File Download Diff File

248
index.html
Unescape Escape View File

@ -13,200 +13,118 @@
html, html,
body, body,
#app { #app {
height: 100%; min-height: 100%;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
} }
.chromeframe { .loader {
margin: 0.2em 0; width: 20em;
background: #ccc; height: 20em;
color: #000; font-size: 1.5vmin;
padding: 0.2em 0;
}
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
}
#loader {
display: block;
position: relative; position: relative;
left: 50%; display: flex;
top: 50%; align-items: center;
width: 150px; justify-content: center;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
-webkit-animation: spin 2s linear infinite;
-ms-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
-o-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 1001;
}
#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
-webkit-animation: spin 3s linear infinite;
-moz-animation: spin 3s linear infinite;
-o-animation: spin 3s linear infinite;
-ms-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
} }
#loader:after { .loader .face {
content: "";
position: absolute; position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%; border-radius: 50%;
border: 3px solid transparent; border-style: solid;
border-top-color: #FFF; animation: animate 3s linear infinite;
-moz-animation: spin 1.5s linear infinite;
-o-animation: spin 1.5s linear infinite;
-ms-animation: spin 1.5s linear infinite;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
} }
}
#loader-wrapper .loader-section { .loader .face:nth-child(1) {
position: fixed; width: 100%;
top: 0;
width: 51%;
height: 100%; height: 100%;
background: #7171C6; color: #0d9be0;
z-index: 1000; border-color: currentColor transparent transparent currentColor;
-webkit-transform: translateX(0); border-width: 0.2em 0.2em 0em 0em;
-ms-transform: translateX(0); --deg: -45deg;
transform: translateX(0); animation-direction: normal;
}
#loader-wrapper .loader-section.section-left {
left: 0;
}
#loader-wrapper .loader-section.section-right {
right: 0;
}
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
} }
.loaded #loader-wrapper .loader-section.section-right { .loader .face:nth-child(2) {
-webkit-transform: translateX(100%); width: 90%;
-ms-transform: translateX(100%); height: 90%;
transform: translateX(100%); color: #7bc528;
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); border-color: currentColor currentColor transparent transparent;
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); border-width: 0.2em 0em 0em 0.2em;
--deg: -135deg;
animation-direction: reverse;
} }
.loaded #loader { .loader .face .circle {
opacity: 0; position: absolute;
-webkit-transition: all 0.3s ease-out; width: 50%;
transition: all 0.3s ease-out; height: 0.1em;
top: 50%;
left: 50%;
background-color: #0000;
transform: rotate(var(--deg));
transform-origin: left;
} }
.loaded #loader-wrapper { .loader .face .circle::before {
visibility: hidden; position: absolute;
-webkit-transform: translateY(-100%); top: -.5em;
-ms-transform: translateY(-100%); right: -0.45em;
transform: translateY(-100%); content: '';
-webkit-transition: all 0.3s 1s ease-out; width: .6em;
transition: all 0.3s 1s ease-out; height: .6em;
background-color: currentColor;
border-radius: 50%;
box-shadow: 0 0 .5em .15em currentColor;
} }
.no-js #loader-wrapper { @keyframes animate {
display: none; to {
transform: rotate(1turn);
} }
.no-js h1 {
color: #222222;
} }
.loader-root {
#loader-wrapper .load_title {
font-family: 'Open Sans';
color: #FFF;
font-size: 19px;
width: 100%; width: 100%;
text-align: center; height: 100vh;
z-index: 9999999999999; display: flex;
position: absolute; justify-content: center;
top: 60%; align-items: center;
opacity: 1; flex-direction: column;
line-height: 30px; background-image: radial-gradient(#2c77bf,#2564a1);
} }
.loader-title {
#loader-wrapper .load_title span { margin: 4vmin 0 10vmin;
font-weight: normal; font-size: 3vmin;
font-style: italic; color:#ccc;
font-size: 13px; text-shadow: .2vmin .2vmin 0 #2564a1;
color: #FFF; letter-spacing: .3vmin;
opacity: 0.5; }
.loader .logo img {
width: 17vmin;
height: 17vmin;
}
.loader .logo {
background-image: linear-gradient(to bottom,#FFF,#aaa);
padding: 3vmin ;
border-radius: 50%;
box-shadow: 0 0 .5vmin #fff inset, 0 0 2vmin #0006;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<div id="loader-wrapper"> <div class="loader-root">
<div id="loader"></div> <div class="loader">
<div class="loader-section section-left"></div> <div class="face">
<div class="loader-section section-right"></div> <div class="circle"></div>
<div class="load_title">正在加载系统资源，请耐心等待</div> </div>
<div class="face">
<div class="circle"></div>
</div>
<div class="logo"><img src="logo.png" loading="lazy"></div>
</div>
<div class="loader-title">正在加载系统资源，请耐心等待...</div>
</div> </div>
</div> </div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
public/logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

Write Preview
Loading…
Cancel
Save