How to add progress bar

Add the following markup where you would like the progress bar to display:

<div class="my-carousel-progress">
    <div class="my-carousel-progress-bar"></div>
</div>

Style it using CSS as you see fit.

The following code snippet should be placed at the end of the document before the closing </body> tag.

<script>
document.addEventListener('splideReady', function(e) {
    var carousel = document.querySelector('.splide');
    var bar = document.querySelector('.my-carousel-progress-bar');

    carousel.addEventListener('mounted', function(e) {
        var splide = e.detail;
        splide.on('mounted move refresh', function() {
            var end = splide.Components.Controller.getEnd() + 1;
            var rate = Math.min((splide.index + 1) / end, 1);
            bar.style.width = String(100 * rate) + '%';
        });

        splide.refresh();

    });
});
</script>