How to Make a Progress Scheduler?

27 / Feb / 2017 by Himanshi Gera 0 comments

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>

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 {
	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 {

.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;

	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.


Leave a comment -