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.
0
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>
You can use the following CSS:-
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23EC3463' stroke-width='10' stroke-dasharray='20' stroke-dashoffset='11' stroke-linecap='square'/%3e%3c/svg%3e");
border-radius: 100px;
Check svg properties to adjust the width and the styles that you want, play with it as much as you can to have a deep understanding.