101 lines
2.2 KiB
HTML
101 lines
2.2 KiB
HTML
<!--
|
||
~ Copyright (c) 2024. bmy
|
||
~ Email：2271608011@qq.com
|
||
~ Github：https://github.com/helpcode
|
||
-->
|
||
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>启动页面</title>
|
||
<meta id="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
|
||
name="viewport">
|
||
<script src="https://at.alicdn.com/t/c/font_4318577_uqa853deiz.js"></script>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.icon {
|
||
width: 1em;
|
||
height: 1em;
|
||
vertical-align: -0.15em;
|
||
fill: currentColor;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.main {
|
||
width: 100%;
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: -150px;
|
||
}
|
||
|
||
.main .icon {
|
||
width: 150px;
|
||
height: 150px;
|
||
}
|
||
|
||
.main p {
|
||
font-size: 20px;
|
||
font-weight: bolder;
|
||
letter-spacing: 2px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.main .pg {
|
||
height: 15px;
|
||
border: none;
|
||
}
|
||
|
||
progress::-webkit-progress-bar {
|
||
border-radius: 10px;
|
||
background: #34495e;
|
||
}
|
||
|
||
progress::-webkit-progress-value {
|
||
border-radius: 10px;
|
||
background: #41b883;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="main">
|
||
<svg aria-hidden="true" class="icon">
|
||
<use xlink:href="#json-Vue"></use>
|
||
</svg>
|
||
<p class="title">..</p>
|
||
<progress class="pg" max="100" value="0"></progress>
|
||
</div>
|
||
<script>
|
||
const pro = $('.pg');
|
||
const title = $('.title');
|
||
|
||
async function getProgress() {
|
||
return await fetch('/__progress').then(res => res.json());
|
||
}
|
||
|
||
async function freshProgress() {
|
||
let {progress} = await getProgress()
|
||
let intProgress = ~~(progress * 100)
|
||
pro.value = intProgress;
|
||
title.innerText = `${intProgress}%`;
|
||
if (progress < 1) {
|
||
setTimeout(freshProgress, 500);
|
||
}
|
||
}
|
||
|
||
function $(className) {
|
||
return document.querySelector(className);
|
||
}
|
||
|
||
freshProgress();
|
||
</script>
|
||
</body>
|
||
</html> |