如何添加Owl-Carousel-2完整性百分比(%)状态栏(不是progressBar)？

$(document).ready(function(){
  $("#carousel").owlCarousel({
    // 配置项
  });
});

$(document).ready(function(){
  $("#carousel").owlCarousel({
    // 配置项
    onInitialized: progressBar,
  });

  function progressBar(event) {
    // 创建状态栏元素
    var progressBar = $("<div>", {
      class: "progress-bar",
      text: "0%",
    });

    // 将状态栏元素添加到轮播容器中
    $(this).append(progressBar);
  }
});

$(document).ready(function(){
  $("#carousel").owlCarousel({
    // 配置项
    onInitialized: progressBar,
    onTranslate: progressBar,
  });

  function progressBar(event) {
    // 获取当前轮播项的索引
    var currentIndex = event.item.index;

    // 计算百分比
    var progress = Math.ceil(((currentIndex + 1) / event.item.count) * 100);

    // 更新状态栏的百分比
    $(".progress-bar").text(progress + "%");
  }
});

.progress-bar {
  background-color: #f00;
  color: #fff;
  padding: 5px;
  text-align: center;
}