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.
7 Replies
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
other option is svg where you can clip a gradient to multiple circles. the colorstops are also adjustable with css
Thank you very much!
no problem, you're welcome!
@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?
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 penOMG, you're the best! Thanx a lot! Cheers from Madrid!