title: How to create a Timeline Progressbar Within Swiper slider : Angular
body: <p>I am trying to create a timeline slider something like facebook stories. For the slider I am using ngx-useful-swiper. I am trying to add a progress bar based on number of slides and the progress bar will increase based on the autoplay time.</p>
  <p>Right now for the progress bar I am using this reference. <a href="https://codepen.io/mkwtzt/pen/QzKqym" rel="nofollow noreferrer">https://codepen.io/mkwtzt/pen/QzKqym</a>
  But I cant not make it look like facebook stories slider. I want the progress bar look like this image <a href="https://i.stack.imgur.com/gNckS.jpg" rel="nofollow noreferrer">Slider Reference image</a>. Also there will are two buttons to pause and play the slider. How can i make autoplay stop and start by clicking on this two buttons?</p>
  <p><strong>Html</strong></p>
  <pre><code>&lt;div class=&quot;timeline-slider&quot;&gt;
    &lt;div id=&quot;progress&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;swiper-action&quot;&gt;
       &lt;a href=&quot;javascript:void(0)&quot; (click)=&quot;play()&quot;&gt;Play&lt;/a&gt;
       &lt;a href=&quot;javascript:void(0)&quot; (click)=&quot;pause()&quot;&gt;Pause&lt;/a&gt;
    &lt;/div&gt;
    &lt;swiper [config]=&quot;config&quot;&gt;
      &lt;div class=&quot;swiper-wrapper&quot;&gt;
        &lt;div class=&quot;swiper-slide&quot;&gt;Slide 1&lt;/div&gt;
        &lt;div class=&quot;swiper-slide&quot;&gt;Slide 2&lt;/div&gt;
        &lt;div class=&quot;swiper-slide&quot;&gt;Slide 3&lt;/div&gt;
        &lt;div class=&quot;swiper-slide&quot;&gt;Slide 4&lt;/div&gt;
        &lt;div class=&quot;swiper-slide&quot;&gt;Slide 5&lt;/div&gt;
      &lt;/div&gt;
    &lt;/swiper&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>Ts</strong></p>
  <pre><code>config: SwiperOptions = {
      autoplay: {
        delay: 5000,
        stopOnLastSlide : true,
        disableOnInteraction: false
      },
      spaceBetween: 0,
      slidesPerView: 1,
      simulateTouch: false,
      effect: 'fade',
      on: {
        progress: () =&gt; {
          this.move();
        }
      } 
    }
  
  
    move() {
      var elem = document.getElementById(&quot;progress&quot;); 
      var width = 1;
      var autoplayTime = 5000 / 100;
      var id = setInterval(frame, autoplayTime);
      function frame() {
          if (width &gt;= 100) {
              clearInterval(id);
          } else {
              width++; 
              elem.style.width = width + '%'; 
          }
      }
    }
  
  
   play(){
     console.log('play')
   }
  
  
   pause(){
     console.log('pause')
   }
  </code></pre>