How to achieve this element/design
Here, I want a tracking element, which will fill based on a particular status or value. I have never done this before, so need some ideas on how to achieve it. This will probably inside a parent container/element which will have other fields as well. But i believe this will be the main part. For practice, I can use 1-5 values and based on each value, the line should be filled.
2 Replies
As with most things, this could be done in many different ways. The best of which may actually depend on how the tracking element is actually going to work.
For example is it interactive, ie the user can update events etc. or is it static ie it is what it is as defined when the page loads?
Should the circles and lines have different colors depending on whether the "event" has been completed or not?
I would probably do this something like this:
Each "event" would have its own container containing 2 children: event title and event time. Defining
display: grid; would ensure that all the event children all have the same widths.
The event would then have 2 pseudo elements, ::before and ::after to create the line and circle in the middle.
Then, assuming that you do want to have a "completed" status, this could be defined as a data attribute or class name on each individual event. This could in turn be used in the CSS to update the colors etc. accordingly.
I have thrown together a quick demo based on a couple of assumptions (eg. that you will have a "completed" state) which may be of some help https://codepen.io/cbolson/pen/BagXgWK@Chris You wont believe it but I actually had the same thought process and I did implement it the same way u mentioned
It is dynamic and right now, since i am not connected to backend, i made a dummy json with a statusValue boolean, based on which each circle is connected
Its just I used a bit of JS for animation and Data handling
Thanks mate