Как сделать индикатор прогресса слайда в slider?

Question

[yakkow]

Подскажите пожалуйста, можно ли с помощью swiper.js сделать такой анимированный индикатор?

GIF

Слайд длится 7 секунд, в слайде прокручивается полоска (индикатор), после чего автоматически переключается слайд и на новом уже другая полоска (индикатор).

Сам слайдер уже собрал, но не знаю как реализовать такой индикатор.

Скрипт инициализации слайдера:

<!-- swiper JS -->
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

<!-- Swiper - Extra Step - add arrows and pagination html markup by code (Append) -->
  
     <script>
      var swiper = new Swiper(".swiper", {
        slideShadows: true,
        slidesPerView: 1,
        loop: true,
        autoplay: {
   	delay: 7000,
        disableOnInteraction: false,
   			},
        loopFillGroupWithBlank: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-next",
          prevEl: ".swiper-prev",
        },   
      });
  
        </script>

Comments

[Виталий Першин]

Самый простой способ через css анимацию просто анимировать ширину полосы в активном слайдере с таким же временем. Более сложный, но более точный это на анимированную полосу повесить событие отслеживающее окончание анимации и вызывать следующий слайдер, ну конечно еще нужно обвешаться кучей проверок и заглушек, но как концепция думаю понятно объяснил