Have you heard about Progress Schedulers? You might have often seen Progress Schedulers on websites and applications these days. These schedulers can display a whole lot of information in a sleek and confined way. They can be seen as schedulers to depict a day's schedule and as status tracking systems like tracking packages on e-commerce sites.
Let us have a look on how to develop a responsive scheduler using HTML/CSS.
Consequently, the progress bar or vertical line will notify how much progress has been made. An after element with scheduler block has been used to position the progress line.
You must remember to make scheduler-block class non-statically (relative in this case) positioned, as the after block is positioned absolutely. Make bullet to float left and content to display as inline-block to align them side by side.
The first element is thus all set.
Repeat the li elements to get a full day scheduler and add a little bottom margin to scheduler block and hide the line below last element.
There are some tweaks required for its desktop view. You need to use a media query for desktop, say, min-width 768px. Once accomplished, centralize bullets and progress lines.
Bullet will position at 50% from the left and progress line would need some extra space so that it can be placed at the center of the circle. Hence, add 11px of space ( 10px-half of circle's width + 1px-half of circle's border width).
Subsequently, position the content by moving it towards the center first.
Move the timings' span to the right-hand side. Now, position it absolutely to 55%+10px (50% + 10px: circle's width + 5%: for the gap).
This, however, has reduced the height of the content block. There are margins available, but their measures will have to be determined by a hit and trial method. In this case, it is 30px.
Lastly, a bottom margin to scheduler-block is applied.
Hope you are able to make progress scheduler with this post.