Scroll Indicator

page.html

<ion-content>
   <section>
     <div class="header"> </div>
     <div class="items-horizontal"> item . . . . (for-loop) </div>
     
     <div class="indicator-tray">
        <div class="indicator"></div>
      </div>
   </section>
</ion-content>

page.scss

ion-content {
  section {
    .indicator-tray {
      width: 40px;
      height: 4px;
      background: #D7D7D7;
      border-radius: 4px;
      margin: 0 auto;
      .indicator {
        width: 0;
        height: inherit;
        background: #0BDBD2;
        border-radius: 4px;
      }
    }
  }
}

page.ts

import { ElementRef, OnInit,} from '@angular/core';

@Component({
  selector: 'app-page',
  templateUrl: './page.html',
  styleUrls: ['./page.scss'],
})
export class Page implements OnInit {
  constructor(
    public element: ElementRef,
  ) { }

  ngOnInit() {
    // ! listener for indicator start
    const indicator =
      this.element
        .nativeElement
        .querySelector('.indicator')

    const itemContainer =
      this.element
        .nativeElement
        .querySelector('.items-horizontal');

    itemContainer.addEventListener('scroll', function (event) {
      const scroll = itemContainer.scrollLeft;
      const width = itemContainer.scrollWidth - itemContainer.clientWidth;
      const scrolled = (scroll / width) * 100;
      indicator.style.width =  `${scrolled}%`;
    });
    // ! listener for indicator end
  }
}

indicator.mp4