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

276
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%; .loader .face {
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; position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%; border-radius: 50%;
border: 3px solid transparent; border-style: solid;
border-top-color: #FFF; animation: animate 3s linear infinite;
-webkit-animation: spin 3s linear infinite; }
-moz-animation: spin 3s linear infinite;
-o-animation: spin 3s linear infinite; .loader .face:nth-child(1) {
-ms-animation: spin 3s linear infinite; width: 100%;
animation: spin 3s linear infinite; height: 100%;
} color: #0d9be0;
border-color: currentColor transparent transparent currentColor;
#loader:after { border-width: 0.2em 0.2em 0em 0em;
content: ""; --deg: -45deg;
animation-direction: normal;
}
.loader .face:nth-child(2) {
width: 90%;
height: 90%;
color: #7bc528;
border-color: currentColor currentColor transparent transparent;
border-width: 0.2em 0em 0em 0.2em;
--deg: -135deg;
animation-direction: reverse;
}
.loader .face .circle {
position: absolute;
width: 50%;
height: 0.1em;
top: 50%;
left: 50%;
background-color: #0000;
transform: rotate(var(--deg));
transform-origin: left;
}
.loader .face .circle::before {
position: absolute; position: absolute;
top: 15px; top: -.5em;
left: 15px; right: -0.45em;
right: 15px; content: '';
bottom: 15px; width: .6em;
height: .6em;
background-color: currentColor;
border-radius: 50%; border-radius: 50%;
border: 3px solid transparent; box-shadow: 0 0 .5em .15em currentColor;
border-top-color: #FFF; }
-moz-animation: spin 1.5s linear infinite;
-o-animation: spin 1.5s linear infinite; @keyframes animate {
-ms-animation: spin 1.5s linear infinite; to {
-webkit-animation: spin 1.5s linear infinite; transform: rotate(1turn);
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-root {
width: 100%;
#loader-wrapper .loader-section { height: 100vh;
position: fixed; display: flex;
top: 0; justify-content: center;
width: 51%; align-items: center;
height: 100%; flex-direction: column;
background: #7171C6; background-image: radial-gradient(#2c77bf,#2564a1);
z-index: 1000; }
-webkit-transform: translateX(0); .loader-title {
-ms-transform: translateX(0); margin: 4vmin 0 10vmin;
transform: translateX(0); font-size: 3vmin;
} color:#ccc;
text-shadow: .2vmin .2vmin 0 #2564a1;
#loader-wrapper .loader-section.section-left { letter-spacing: .3vmin;
left: 0; }
} .loader .logo img {
width: 17vmin;
#loader-wrapper .loader-section.section-right { height: 17vmin;
right: 0; }
} .loader .logo {
background-image: linear-gradient(to bottom,#FFF,#aaa);
padding: 3vmin ;
.loaded #loader-wrapper .loader-section.section-left { border-radius: 50%;
-webkit-transform: translateX(-100%); box-shadow: 0 0 .5vmin #fff inset, 0 0 2vmin #0006;
-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 {
-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 {
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
visibility: hidden;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;
}
.no-js #loader-wrapper {
display: none;
}
.no-js h1 {
color: #222222;
}
#loader-wrapper .load_title {
font-family: 'Open Sans';
color: #FFF;
font-size: 19px;
width: 100%;
text-align: center;
z-index: 9999999999999;
position: absolute;
top: 60%;
opacity: 1;
line-height: 30px;
}
#loader-wrapper .load_title span {
font-weight: normal;
font-style: italic;
font-size: 13px;
color: #FFF;
opacity: 0.5;
}
</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