How do I configure Mantine carousel to display indicators in instragram-story like layout?

[usamazansari]

Hi!

I am building a personal project which pulls the calendar events, tasks, some data from sheets, all in Google workspace and I am using Mantine as the UI library (because it is fantastic! 🎉)

I am deploying it locally on a Raspberry Pi3 with a spare monitor. I have set it up in my living room so that me and my wife could have a glance easily on the upcoming events, budget of the current month, etc.

Since the app is perfect use case for a dashboard display in Kiosk mode, there will not be any user interactions - this makes it again pretty strong for NestJS Server components. I wish to display various components in my application (display tables from Google Sheets, events from Google Calendar, photos, etc.) in an instagram story or google photos highlights layout where we see some indicators with progress, display the next component afterwards and loop back from the start.

Mantine carousel indeed provides customization options for the indicator and autoplay, but there is no support for filling it with progress yet (I don't know if it is possible via CSS). I also understand that making such a change will involve surgical processes on the embla library itself, but I am looking for a quick and dirty solution which would get this working.

Thanks in advance!

[rtivital]

See example of custom progress – https://mantine.dev/x/carousel/#get-embla-instance