jquery做一个横向百分比进度条（动态加载）

功能介绍：jquery做一个横向百分比进度条，数据从接口读取，实时刷新数据，进度条需要记住上一次的地方进行前后滑动，不能每次都从0开始加载。

具体代码如下：

html代码：

<div class="horizontal-percen">
  <span id="horizontal"></span>
</div>

css代码：

body{
  background: #77a5f1;
  display: flex;
  align-items: center;
  height: 100vh;
  justify-content: center;
}
.horizontal-percen {
   position: relative;
   margin: 79px auto;
   width: 280px;
   height: 20px;
   border-radius: 20px;
   background: white;
   overflow: hidden;
 }

.horizontal-percen span {
   position: absolute;
   width: 20%;
   height: 20px;
   border-radius: 20px;
   background: linear-gradient(to right, #fc770a, #ffd739);
   transition: all .5s;
 }

jquery代码：

let stripMeet = roundMeet = 100,
stripValue = roundValue = 20,
stripInterval = null,
roundInterval = null;

//进度条效果
let UpDataSpeed = (val, isStrip, isClear) = >{
  if (isStrip) {
    if (isClear) {
      window.clearInterval(stripInterval);
    }
    $('#horizontal').css('width', val + '%').find('b').text(val + '%');
  } else {
    if (isClear) {
      window.clearInterval(roundInterval);
    }
  }
};

//自动改变进度条
window.clearInterval(stripInterval);
stripInterval = window.setInterval(function() {
  stripValue = parseInt(Math.random() * stripMeet);
  UpDataSpeed(parseInt((stripValue / stripMeet) * stripMeet), true);
},
2000);

如何利用jQuery判断页面中是否存在某个class

jquery如何设置图片背景

jquery改变屏幕大小时触发

jquery如何实现返回头部

jquery鼠标点页面出现水波纹特效

标签： jquery知识, 百分比进度条

上面是“jquery做一个横向百分比进度条（动态加载）”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_3267.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！