Free-trial days left indicator

Hey, any suggestions how to achieve this? Trial period is 14-days-long, there are 5 circles to indicate at what stage of this trial period the user is. How to change their colors without changing the color of anything else? Thanks in advance.
No description
7 Replies
MarkBoots
MarkBoots12mo ago
In css you can make a div with a linear gradient from grey to blue, with the color-stop based on the percentage 100% / totalDays * remainingDays and with a mask-image: radial-gradient (repeated) you can create the circles. i've made a small example https://codepen.io/MarkBoots/pen/RwvpybP
MarkBoots
MarkBoots12mo ago
other option is svg where you can clip a gradient to multiple circles. the colorstops are also adjustable with css
Marian Koniuszko
Marian Koniuszko12mo ago
Thank you very much!
MarkBoots
MarkBoots12mo ago
no problem, you're welcome!
Marian Koniuszko
Marian Koniuszko12mo ago
@MarkBoots Thanks again. It's the first time I 'work' with the masks in CSS, I must confess that I'm struggling a little even trying to understand that piece of code you wrote (I will definitely need to watch some tutorial in the evening). And there's something I don't understand at all: I reduced --circle-size to 14px and after that, instead of 5, I had 7 circles. Why is it so? How to change that last value to 5 again?
MarkBoots
MarkBoots12mo ago
ah, that happens because the total spacing is enough to fit extra circles. hm, didnt account for that. you can change the spacing to a low number to bring it back to 5. or you can set --circle-spacing: calc(var(--circle-size) / var(--circles)) that is the maximum spacing for it not to have extra circles --i've updated the pen
Marian Koniuszko
Marian Koniuszko12mo ago
OMG, you're the best! Thanx a lot! Cheers from Madrid!
Want results from more Discord servers?
Add your server