Is there a possibility to create a WhatsApp-status-like border with CSS?

I am working on a social media project at the moment, where I want to implement "stories".

I want there to be an easy way to see how many stories you've already seen and how many there are.

Then, seeing the WhatsApp status (), I thought that this could be a good way.

I was looking forward to implementing this in CSS, but looking it up, there were only very few results that didn't provide me with the information I would need.

I stumbled across the "conic-gradient" CSS property, however, I can only make one whole border, not many small ones that I could round.

Are there any ideas or information (e.g. MDN docs, own code) you have for me? Thanks.

You could use an SVG with a stroke-dasharray.

:root {
  --value: 100;
  --time: 3s;
}

svg {
  height: 90vh;
  ]
}

path {
  fill: transparent;
  stroke-width: 20;
  stroke-linecap: butt;
}

.circle {
  stroke: lightblue;
  stroke-dasharray: 15 5;
}

<svg viewbox="0 0 320 320">


  <path class="circle" d="M160,10
                         A150,150 0 0 1 160,310
                         A150,150 0 0 1 160,10
                         " pathLength="120"/> 
  

</svg>