How to Make a Progress Scheduler?
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.
1. Mobile-first approach:
Let us first understand making scheduler with a mobile-first approach. The most important and basic thing is HTML structure for a scheduler is outlined below:
<ul class="scheduler"> <li class="scheduler-block"> <div class="scheduler-bullet"></div> <div class="scheduler-content"> <h3> Breakfast </h3> <span> 8:00-9:00 </span> </div> </li> </ul>
Once the basic step is accomplished, provide styling to a bullet which is a simple circle:
.scheduler-bullet { width: 20px; height: 20px; border-radius: 50%; border: 2px solid grey; }
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.
.scheduler-block:after { content:""; width: 2px; height: 30px; position: absolute; top: 24px; left: 11px; background: grey; }
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.
.scheduler-content { display:inline-block; margin-left:10px; } .scheduler-bullet { float: left; }
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.
.scheduler-block { position: relative; margin-bottom: 12px; } .scheduler-block:last-child:after{ display: none; }
2. Desktop View
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).
.scheduler-bullet { position: absolute; left: 50%; } .scheduler-block:after { position: absolute; left: calc(50% + 11px); }
Subsequently, position the content by moving it towards the center first.
.scheduler-content { width: 45%; text-align: right; }
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).
.scheduler-content span { position: absolute; width: 100%; display: inline-block; text-align: left; top: 2px; left: calc(55% + 10px); }
It will be displayed as:
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.
The progress of the scheduler can be shown by adding an active class to the scheduler-block and styling its content as follows:
.active .scheduler-bullet { background-color: green; border-color: green; } .active:after { background-color: green; }
An active class is added to the scheduler. Thus, the number of completed and upcoming tasks on a day’s schedule can be tracked. You can add/remove active class with the help of Javascript/jQuery.
Hope you are able to make progress scheduler with this post.