Javascript 如何使用jquery每个函数为元素添加宽度？

我想建立一个加载条效果使用两个相互独立的div。我把所有的东西都放好了，但是我怎样才能让其中一个用过渡把宽度从%1增加到%100呢？我想在10秒内填好

谢谢

 <div class="loading-container">

            <div class="outside-loading"></div>
            <div class="inside-loading"></div>
 </div>

使用jQuery非常简单，您可以自定义它来执行步骤或缓解，还可以根据需要使用回调来启动或完成

$（'.outside load'）。动画（{width:'100%}，3000）；//演示使用3秒

。外部加载{
背景：蓝色；
宽度：0；
高度：.5em
}

---

普通Javascript

创建一个函数并使用设置的间隔函数增加宽度。添加一个条件，检查宽度是否为100%，如果为100%，则清除间隔。我还将div相互移动，并将内部span标记的显示设置为inline block

您还可以针对元素

textContent

，并以百分比显示宽度进度

var i=0；
函数move（）{
如果（i==0）{
i=1；
var elem=document.getElementsByClassName（“内部加载”）；
var宽度=1；
变量id=设置间隔（帧，100）；
函数框架（）{
如果（宽度>=100）{
清除间隔（id）；
i=0；
}否则{
宽度++；
元素[0]。style.width=width+“%”；
元素[0]。textContent=width+“%”；
}
}
}
}
move（）
。外部加载{
宽度：100%；
高度：30px；
背景颜色：灰色；
}
.内装{
显示：内联块；
宽度：1%；
身高：100%；
背景色：红色；
文本对齐：右对齐；
垂直对齐：中间对齐；
字体大小：30px；
字体大小：粗体；
字体系列：Arial、Helvetica、无衬线字体；
}




非常感谢您的支持，非常好！我也为滑块制作了这个，它在10秒后滑动，我把加载动画从3改为10。它会滑动，但当我回到上一个滑块时，动画不会重置。我怎样才能解决这个问题？再次感谢。使用complete callback重置宽度我目前使用的是swiper.js，我将使用此栏使其看起来像一个加载栏，当滑动到其他图像时，是否有方法进行回调？使用swiper的events api启动并重置进度栏可能还想使用jQuery
stop（）
查看文档