# Trying to create story progress bar

**URL:** <https://community.weweb.io/t/trying-to-create-story-progress-bar/6470>\
**Category:** How do I?\
**Created:** [January 18, 2024, 6:44pm UTC](https://community.weweb.io/t/trying-to-create-story-progress-bar/6470 "2024-01-18T18:44:09Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![axelCCCOM](https://avatars.discourse-cdn.com/v4/letter/a/94ad74/32.png) [@axelCCCOM](https://community.weweb.io/u/axelCCCOM)\
**Post date:** [January 18, 2024, 6:44pm UTC](https://community.weweb.io/t/trying-to-create-story-progress-bar/6470/1 "2024-01-18T18:44:09Z")

</div>

Hi there,

I’m interested in recreating the progress bars used in Instagram stories. These are the small horizontal bars at the top of the screen that indicate the duration of each story and the total number of stories in the series. I want to add them on top of an infinite slider of pictures.  
I think I can do it with some custom Javascript and the progress bar, but I wanted to know if there was a more easy way. Especially I’d like to know when a slide is changing in the carousel.

Thanks !

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [January 18, 2024, 9:52pm UTC](https://community.weweb.io/t/trying-to-create-story-progress-bar/6470/2 "2024-01-18T21:52:02Z")

</div>

You need to repeat a div for the length of your images collection basically. I’d need to see your data setup. Btw. if your sliders is infinite, then the bars would be infinitely small, just a tiny detail.

If you provide more context, I could direct you further.

---

<div class="post-metadata">

**Author:** ![axelCCCOM](https://avatars.discourse-cdn.com/v4/letter/a/94ad74/32.png) [@axelCCCOM](https://community.weweb.io/u/axelCCCOM)\
**Post date:** [January 19, 2024, 10:51am UTC](https://community.weweb.io/t/trying-to-create-story-progress-bar/6470/3 "2024-01-19T10:51:41Z")

</div>

Thanks for you answer !  
Actually infinite slider is the name of the element I added. I have a finite number of pictures that are looping infinitely.  
Not sure about what you need about the data setup but I have made a few screenshots of where I am now.

 ![Capture d’écran 2024-01-19 à 11.49.57](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/18f75cd68f231c51f988ed54b1314f371bacaa5c.jpeg)  
 ![Capture d’écran 2024-01-19 à 11.50.07](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/9e3cbbe05d3ff8ee656cc6ff5d02dfaaa9feb16d.jpeg)  
 ![Capture d’écran 2024-01-19 à 11.50.22](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/f925c18832d7e3f1e4ce95cfb235d6b31d155376.jpeg)  
 ![Capture d’écran 2024-01-19 à 11.50.30](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/f3252171977a55092e4347fc5b5fd6b0dee5c554.jpeg)

As you can see I already put the progress bars on top of the slider but I want them to progress when I’m on the picture linked to it, and to be full if the picture is before the shown picture.  
I thought the best way to do it was to know what picture is shown but I don’t know how to achieve that.  
Tell me if you need more info.