js实现页面加载颜色渐变进度条

最新推荐文章于 2024-08-05 10:53:32 发布

xlb_123

最新推荐文章于 2024-08-05 10:53:32 发布

阅读量2.6k

点赞数

分类专栏： js相关 web前端开发

本文链接：https://blog.csdn.net/qq736150416/article/details/52945189

版权

这篇博客详细介绍了如何利用JavaScript实现一个动态的颜色渐变进度条效果，内容包括选择合适的CSS样式设置背景颜色渐变，通过JavaScript控制进度条的宽度变化，以及实现平滑的动画效果。

摘要由CSDN通过智能技术生成

标签：

<div class="progress">
 <div class="progress-val" id="bar_width">100%</div>
     <div class="progress-bar">
        <span class="progress-in" id="bar" style="width:0%"></span>
    </div>
</div>

样式表：

.progress {
  width: 90%;
  height: 34px;
  position: relative;
  margin: 10px auto;
  display: inline-grid;
  top: -35px;
}
.progress-val {
  margin-left: 15px;
  font: bold 15px/34px Helvetica, Arial, sans-serif;
  color: #2368ca;
  text-shadow: 0 1px rgba(255, 255, 255, 0.6);
  width: 10%;
  position: relative;
  height: 20px;
  left:78%;
  top: 8px;
}
.progress-bar