效果如下：

Progress Bar Example
完成度：68.7% 
#############插入方法###############
###加上 !!! 使blog可以渲染html代码###
!!!
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Progress Bar Example</title>
<style> 
@property --progress {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.g-progress {
    margin: auto;
    width: 100%;
    height: 35px;
    border-radius: 25px;
    background: linear-gradient(90deg, #0f0, #0ff var(--progress), transparent 0);
    position: relative; /* 添加相对定位 */
    border: 1px solid #eee;
    transition: .3s --progress;
    display: inline-block;
    
}

.g-progress > text {
    position: absolute; /* 添加绝对定位 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* 居中文本 */
    color: #333; /* 调整文本颜色 */
    font-size: 14px; /* 调整文本大小 */
    margin: 0; /* 移除默认的文本边距 */
}

.progress-description {
    display: inline-block;
    width: 100px;
    text-align: right;
    margin-right: 10px;
}
</style>
</head>
<body>

<div class="g-progress" style="--progress: 68.7%">
<text class="progress-description">完成度：68.7%</text>
</div>


</body>
</html>
!!!
#################################

与AI友好交流后,实现可滑动的进度条。

Progress Bar Example
完成度:0% 

!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Progress Bar Example</title>
<style> 
@property --progress {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.progress-bar {
    margin: auto;
    width: 240px;
    height: 35px;
    border-radius: 25px;
    background: linear-gradient(90deg, #0f0, #0ff var(--progress), transparent 0);
    position: relative;
    border: 1px solid #eee;
    transition: .05s --progress;
    display: inline-block;
}

.progress-bar > text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #333;
    font-size: 14px;
    margin: 0;
    transition: 3s;
}

.progress-description {
    display: inline-block;
    width: 100px;
    text-align: right;
    margin-right: 10px;
}
/* 按钮样式 */
.button {
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #007BFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #0056b3;
}

/* 按钮点击时的样式 */
.button:active {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) inset;
}
</style>
</head>
<body>

<div class="progress-bar" style="--progress: 0%">
    <text class="progress-description">完成度:0%</text>
</div>
<div><button class="button" id="resetButton">重置进度条</button></div>

<script>
// JavaScript代码来动态更新进度条和文字
function updateProgressBar(progress) {
    const progressBar = document.querySelector('.progress-bar');
    progressBar.style.setProperty('--progress', progress + '%');
    const progressDescription = progressBar.querySelector('.progress-description');
    progressDescription.textContent = `完成度:${progress.toFixed(1)}%`;
}

// 重置进度条的函数
function resetProgressBar() {
    updateProgressBar(0); // 重置进度到0%
    startAnimation(); // 重新开始动画
}

// 开始动画的函数
function startAnimation() {
    let currentProgress = 0;
    const animationFrame = requestAnimationFrame(function animate() {
        if (currentProgress >= 50.5) {
            cancelAnimationFrame(animationFrame);
        } else {
            currentProgress += 0.1; // 每次增加0.1%
            updateProgressBar(currentProgress);
            animationFrame = requestAnimationFrame(animate);
        }
    });
}

// 给重置按钮添加点击事件监听器
document.getElementById('resetButton').addEventListener('click', resetProgressBar);

// 页面加载时开始动画
startAnimation();
</script>

</body>
</html>
!!!

本文作者：sheetung

本文链接：https://cutech.space/archives/progressblog.html

版权声明：转载时须注明出处（包括原作者和文章链接）及本声明