Pagination progress trong Swiper slide

Trong cấu trúc HTML của Swiper slide ngay trong thẻ div chứa class swiper-container chúng ta cần bổ sung thêm thẻ div với class swiper-pagination

<!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
     ...	
	  </div>  
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

Tiếp theo trong js khởi tạo Swiper chúng ta cần bổ sung thêm tùy chọn pagination có type "progressbar"

<!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
     pagination: {
        el: '.swiper-pagination',
		type: 'progressbar',
		},
    });
  </script>