{"id":46446,"date":"2017-02-27T15:47:45","date_gmt":"2017-02-27T10:17:45","guid":{"rendered":"https:\/\/tothenewco.pro\/blog\/?p=46446"},"modified":"2017-03-06T12:49:41","modified_gmt":"2017-03-06T07:19:41","slug":"how-to-make-a-progress-scheduler","status":"publish","type":"post","link":"https:\/\/tothenewco.pro\/blog\/how-to-make-a-progress-scheduler\/","title":{"rendered":"How to Make a Progress Scheduler?"},"content":{"rendered":"

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\u00a0seen\u00a0as schedulers to depict a day\u2019s schedule and as status tracking systems like tracking packages on e-commerce sites.<\/span><\/p>\n

Let us have a look on how to develop a responsive scheduler using HTML\/CSS<\/a>.\u00a0<\/span><\/p>\n

\"snap6\"<\/p>\n

1. Mobile-first approach:<\/strong><\/p>\n

Let us first understand making scheduler with a mobile-first approach<\/a>. The most important and basic thing\u00a0is\u00a0HTML structure<\/em> for a scheduler is outlined\u00a0below:<\/p>\n

[js]
\n<ul class="scheduler">
\n\t<li class="scheduler-block">
\n\t\t<div class="scheduler-bullet"><\/div>
\n\t\t<div class="scheduler-content">
\n <h3> Breakfast <\/h3>
\n <span> 8:00-9:00 <\/span>
\n <\/div>
\n\t<\/li>
\n<\/ul>
\n[\/js]<\/p>\n

Once the basic step is accomplished, provide\u00a0styling\u00a0to\u00a0a bullet<\/em> which is a simple circle:<\/p>\n

[js]<\/p>\n

.scheduler-bullet {
\n\twidth: 20px;
\n\theight: 20px;
\n\tborder-radius: 50%;
\n\tborder: 2px solid grey;
\n}<\/p>\n

[\/js]<\/p>\n

Consequently, the\u00a0progress bar or vertical line<\/em>\u00a0will notify how much progress has been made. An\u00a0after element<\/em> with scheduler block has been used to position the progress line. <\/span><\/p>\n

[js]
\n.scheduler-block:after {
\n\tcontent:"";
\n\twidth: 2px;
\n height: 30px;
\n\tposition: absolute;
\n\ttop: 24px;
\n \tleft: 11px;
\n\tbackground: grey;
\n}
\n[\/js]<\/p>\n

You must remember to make scheduler-block class non-statically (relative<\/em> in this case) positioned, as the after block is positioned absolutely. Make bullet<\/em> to float left<\/em> and content<\/em> to display as inline-block<\/em> to align them side by side.<\/span><\/strong><\/p>\n

[js]
\n.scheduler-content {
\n\tdisplay:inline-block;
\n\tmargin-left:10px;
\n}<\/p>\n

.scheduler-bullet {
\n\tfloat: left;
\n}
\n[\/js]<\/p>\n

The first element is thus all set.<\/span><\/strong><\/p>\n

\"snap1\"<\/p>\n

Repeat the li elements to get a full day scheduler\u00a0and add a little bottom margin<\/em> to scheduler block<\/em> and hide the line below last element<\/em>.<\/span><\/strong><\/p>\n

[js]
\n.scheduler-block {
\n\u00a0\u00a0\u00a0\u00a0position: relative;
\n\tmargin-bottom: 12px;
\n}<\/p>\n

.scheduler-block:last-child:after{
\n\tdisplay: none;
\n}
\n[\/js]<\/p>\n

\"snap2\"<\/span><\/strong><\/p>\n

2. Desktop View<\/strong><\/p>\n

There are some tweaks required for its desktop view. You need to use a media query for desktop, say,\u00a0min-width 768px. Once accomplished,\u00a0centralize bullets and progress lines.<\/p>\n

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\u2019s width + 1px-half of circle\u2019s border width).<\/span><\/strong><\/p>\n

[js]
\n.scheduler-bullet {
\n\tposition: absolute;
\n\tleft: 50%;
\n}<\/p>\n

.scheduler-block:after {
\n\tposition: absolute;
\n\tleft: calc(50% + 11px);
\n}
\n[\/js]<\/p>\n

Subsequently, position the content by moving it towards the\u00a0center first.\u00a0<\/span><\/strong><\/p>\n

[js]
\n.scheduler-content {
\n\twidth: 45%;
\n\ttext-align: right;
\n}
\n[\/js]<\/p>\n

\"snap3\"<\/p>\n

Move the timings\u2019 span to the\u00a0right-hand side. Now,\u00a0position it absolutely to 55%+10px (50% + 10px: circle\u2019s width + 5%: for the gap).<\/em><\/p>\n

[js]
\n.scheduler-content span {
\n\tposition: absolute;
\n\twidth: 100%;
\n\tdisplay: inline-block;
\n\ttext-align: left;
\n\ttop: 2px;
\n\tleft: calc(55% + 10px);
\n}
\n[\/js]<\/p>\n

It will be displayed as:<\/p>\n

\"snap4\"<\/p>\n

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<\/em>. <\/span><\/strong><\/p>\n

Lastly, a\u00a0bottom margin to scheduler-block<\/em>\u00a0is applied.<\/span><\/strong><\/p>\n

\"snap5\"<\/p>\n

The progress of the\u00a0scheduler\u00a0can be shown by adding an active<\/em> class to the scheduler-block and styling its content as follows:<\/p>\n

[js]
\n.active .scheduler-bullet {
\n\tbackground-color: green;
\n\tborder-color: green;
\n}<\/p>\n

.active:after {
\n\tbackground-color: green;
\n}
\n[\/js]<\/p>\n

An\u00a0active class is added to the scheduler. Thus,\u00a0the number of completed and upcoming tasks on a day’s schedule can\u00a0be tracked.\u00a0You can add\/remove\u00a0active class with the help of Javascript\/jQuery<\/em>.<\/p>\n

\"snap6\"<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Hope you are able to make progress scheduler with this post.<\/p>\n","protected":false},"excerpt":{"rendered":"

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\u00a0seen\u00a0as schedulers to depict a day\u2019s schedule and as status tracking systems like tracking packages on e-commerce sites. Let […]<\/p>\n","protected":false},"author":964,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":4,"footnotes":""},"categories":[3429,1],"tags":[245,4118,4842,55,4455,379],"class_list":["post-46446","post","type-post","status-publish","format-standard","hentry","category-front-end-development","category-technology","tag-css","tag-frontend-development","tag-html","tag-javascript","tag-scheduler","tag-ui"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t