托管本地服务器的扩展程序，供您预览Web项目！
此扩展对于尚未创建服务器的项目最有用
安装OK后，代开HTML文档会出现下图图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SVG实现水球进度条</title>
</head>
<link rel="stylesheet" href="../common.css" />
<style>
:root {
--bg: #222;
--wave1: #a0edff;
--wave2: rgba(40, 187, 255, 0.5);
--wave3: #2084cc;
}
body {
background: var(--bg);
}
.box {
width: 650px;
height: 300px;
border: 1px solid;
background: linear-gradient(
270deg,
rgba(29, 170, 210, 0) 0%,
rgba(29, 170, 210, 0.1) 13%,
rgba(29, 170, 210, 0.4) 49%,
rgba(29, 170, 210, 0.1) 84%,
rgba(29, 170, 210, 0) 100%
);
border-image: linear-gradient(
270deg,
rgba(81, 201, 232, 0),
rgba(56, 187, 222, 0),
rgba(56, 187, 222, 1),
rgba(30, 172, 212, 0)
)
1 1;
display: flex;
align-items: center;
justify-content: center;
}
.box-inner {
width: 200px;
height: 200px;
box-shadow: 0 2px 7px 0 #238fdb;
border-radius: 50%;
position: relative;
border: 2px solid transparent;
background: linear-gradient(#021f40, #021f40);
background-origin: border-box;
background-clip: content-box, border-box;
/* 溢出隐藏 */
overflow: hidden;
}
.inner {
width: 100%;
height: 100%;
position: absolute;
background: #a0edff;
/* 添加底部距离 */
bottom: calc(-128% var(--per));
}
.box-waves {
position: absolute;
left: 0;
bottom: 100%;
width: 200%;
stroke: none;
}
.box-waves:nth-child(1) {
fill: var(--wave1);
transform: translate(-50%, 0);
z-index: 3;
/* svg重合有一条线条，将边距设置为负的 */
margin-bottom: -2px;
/* 添加动画 */
animation: wave-move1 1.5s infinite linear;
}
.box-waves:nth-child(2) {
fill: var(--wave2);
transform: translate(0, 0);
z-index: 2;
animation: wave-move2 3s infinite linear;
}
.box-waves:nth-child(3) {
fill: var(--wave3);
transform: translate(-50%, 0);
z-index: 1;
/* 添加动画 */
animation: wave-move1 3s infinite linear;
}
@keyframes wave-move1 {
100% {
transform: translate(0, 0);
}
}
@keyframes wave-move2 {
100% {
transform: translate(-50%, 0);
}
}
.box-text {
font-size: 30px;
font-weight: bold;
width: 80px;
text-align: center;
margin-left: 20px;
color: #7eedff;
}
</style>
<body>
<div class="box">
<div class="box-inner">
<div class="inner" style="--per: 0%" id="box">
<!-- 添加svg波浪 -->
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.0"
viewBox="0 0 600 140"
class="box-waves"
>
<path
d="M 0 70 Q 75 20,150 70 T 300 70 T 450 70 T 600 70 L 600 140 L 0 140 L 0 70Z"
></path>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.0"
viewBox="0 0 600 140"
class="box-waves"
>
<path
d="M 0 70 Q 75 20,150 70 T 300 70 T 450 70 T 600 70 L 600 140 L 0 140 L 0 70Z"
></path>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.0"
viewBox="0 0 600 140"
class="box-waves"
>
<path
d="M 0 70 Q 75 20,150 70 T 300 70 T 450 70 T 600 70 L 600 140 L 0 140 L 0 70Z"
></path>
</svg>
</div>
</div>
<div id="percentText" class="box-text">--%</div>
</div>
</body>
<script>
const getData = () => {
const box = document.getElementById("box");
const text = document.getElementById("percentText");
let i = 0;
let timer = null;
const loading = () => {
if (i < 100) {
i ;
box.style.setProperty("--per", i "%");
text.innerHTML = i "%";
} else {
i = 0;
clearInterval(timer);
setTimeout(() => {
text.innerHTML = "0%";
box.style.setProperty("--per", "0%");
timer = setInterval(loading, 100);
}, 2000);
}
};
loading();
timer = setInterval(loading, 100);
};
// 执行
getData();
</script>
</html>
视频演示：http://mpvideo.qpic.cn/0bc3dyaacaaa2yad75xhanrvahwdaepaaaia.f10002.mp4?
