浅念
126 lines
2.4 KiB
HTML
126 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Progress</title>
|
|
<style>
|
|
body {
|
|
background:#0b0f14;
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
height:100vh;
|
|
}
|
|
|
|
.progress-wrap {
|
|
width:680px;
|
|
height:30px;
|
|
padding:3px;
|
|
border-radius:20px;
|
|
background:linear-gradient(180deg,#ffb15a,#ff8c2a);
|
|
box-shadow:0 0 8px rgba(255,153,51,.6);
|
|
}
|
|
|
|
.progress-bg {
|
|
position:relative;
|
|
width:100%;
|
|
height:100%;
|
|
background:#1a1f26;
|
|
border-radius:16px;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.progress-bar {
|
|
position:relative;
|
|
height:100%;
|
|
width:0%;
|
|
border-radius:16px;
|
|
background:
|
|
repeating-linear-gradient(
|
|
45deg,
|
|
rgba(255,255,255,.25) 0,
|
|
rgba(255,255,255,.25) 8px,
|
|
rgba(255,255,255,.12) 8px,
|
|
rgba(255,255,255,.12) 16px
|
|
),
|
|
linear-gradient(180deg,#ffd27d,#ff8c2a);
|
|
animation:move 1.2s linear infinite;
|
|
box-shadow:inset 0 0 6px rgba(255,255,255,.6);
|
|
}
|
|
|
|
@keyframes move {
|
|
from { background-position:0 0; }
|
|
to { background-position:40px 0; }
|
|
}
|
|
|
|
/* 箭头容器（圆形） */
|
|
.progress-info {
|
|
position:absolute;
|
|
right: 0px;
|
|
top:50%;
|
|
transform:translateY(-50%);
|
|
display:flex;
|
|
align-items:center;
|
|
gap:6px;
|
|
color:#fff;
|
|
font-size:13px;
|
|
font-weight:600;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
.play-btn {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius:50%;
|
|
background: #dc7439;
|
|
border: 2px solid #ffb521;
|
|
/* box-shadow:
|
|
0 0 6px rgba(255,170,60,.8),
|
|
inset 0 0 3px rgba(255,255,255,.9); */
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
}
|
|
|
|
.play-btn::before {
|
|
content:"";
|
|
margin-left:2px;
|
|
width:0;
|
|
height:0;
|
|
border-top:5px solid transparent;
|
|
border-bottom:5px solid transparent;
|
|
border-left:7px solid #fff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="progress-wrap">
|
|
<div class="progress-bg">
|
|
<div class="progress-bar" id="bar">
|
|
<div class="progress-info">
|
|
<div class="play-btn"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let value = 0;
|
|
const target = 77.05;
|
|
const bar = document.getElementById('bar');
|
|
const percent = document.getElementById('percent');
|
|
|
|
const timer = setInterval(() => {
|
|
value += 0.4;
|
|
if (value >= target) {
|
|
value = target;
|
|
clearInterval(timer);
|
|
}
|
|
bar.style.width = value + '%';
|
|
}, 20);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|