Jquery 如何在owl转盘2中从左到右启动进度条动画

我正在使用带有进度条的Owl CAROSAL2。我指的是这个问题

公认的答案是有效的

我的密码在这里

现在我要做的是，我不想100%显示进度条。我必须显示一个中心对齐的50%进度条。我试过了，但是进度条动画有一些问题。它向左向右移动。我希望它从左边开始，在右边结束

我正在得到输出

---

您可以使用父div设计进度条。请全屏查看演示

//初始化旋转木马
initSlider（）；
函数initSlider（）{
$（“.owl carousel”）.owl carousel({
项目：1，
循环：对，
自动播放：对，
onInitialized:startProgressBar，
onTranslate:resetProgressBar，
onTranslated:startProgressBar
});
}
函数startProgressBar（）{
//应用关键帧动画
$（“.slide progress”）.css({
宽度：“100%”，
过渡：“宽度5000ms”
});
}
函数resetProgressBar（）{
$（“.slide progress”）.css({
宽度：0，
过渡：“宽度0”
});
}

.owl demo.item img{
显示：块；
宽度：100%；
高度：自动；
}
.幻灯片进度{
宽度：0；
最大宽度：100%；
高度：4px；
背景：#7fc242；
}
.幻灯片进度主管{
浮动：无；
保证金：30像素自动；
宽度：50%
}

这是我的代码