Video Tutorial for Dynamically Inserting Multiple Progress Bar

In this tutorial we will demonstrate the way to insert the progress bar dynamically to the DOM using JavaScript.

Basic Template:-

<div class="progressBarHolder"
        data-progress="40"
        data-max-progress="100"
        data-show-extra="N">
</div>

Video Tutorial:-

Desired Output:-

Dynamically Inserting Multiple Progress Bar

Dynamically Inserting Multiple Progress Bar

To achieve the above design below is the simple code,

HTML Template:-

<script type="text/x-jQuery-tmpl" id="sampleTmpl">
            <div class="progressBarHolder"
	         data-progress="${data1.progress}"
	         data-max-progress="${data1.maxprogress}"
	         data-show-extra="${data1.flag}">
            </div>
            <div class="progressBarHolder"
	         data-progress="${data2.progress}"
	         data-max-progress="${data2.maxprogress}"
	         data-show-extra="${data2.flag}">
            </div>
            <div class="progressBarHolder"
	         data-progress="${data3.progress}"
	         data-max-progress="${data3.maxprogress}"
	         data-show-extra="${data3.flag}">
            </div>
            <div class="progressBarHolder"
	         data-progress="${data4.progress}"
	         data-max-progress="${data4.maxprogress}"
	         data-show-extra="${data4.flag}">
            </div>
</script>

CSS:-

.progressBar {
	width: 100%;
	height: 16px;
	border-radius: 8px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5) inset;
	background: #9DA5B0;
	background: -o-linear-gradient(top, #9DA5B0 0%, #B6BCC6 100%) repeat scroll 0 0 transparent;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0,#9DA5B0), color-stop(1,#B6BCC6)) repeat scroll 0 0 transparent;
	background: -webkit-linear-gradient(top, #9DA5B0 0%, #B6BCC6 100%) repeat scroll 0 0 transparent;
	background: -moz-linear-gradient(top, #9DA5B0 0%, #B6BCC6 100%) repeat scroll 0 0 transparent;
	background: -ms-linear-gradient(top, #9DA5B0 0%, #B6BCC6 100%) repeat scroll 0 0 transparent;

}

.progressBarIndicator {
	width: 40%;
	height: 14px;
	position: relative;
	top: -16px;
	border-radius: 8px;
	border: 1px solid #4C8932;
	overflow: hidden;
	box-shadow: 0 1px 0 0 #DBF383 inset, 0 -1px 1px #58C43A inset;
}

.progressBarIndicator:after {
	content: "";
	display: block;
	width: 100%;
	height: 16px;
	overflow: hidden;
	background : url(progress_divider.png) repeat;
}

.barColorGreen {
          border: 1px solid #4C8932;
          box-shadow: 0 1px 0 0 #DBF383 inset, 0 -1px 1px #58C43A inset;
	background: #9DA5B0;
          background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0,#9BDD62), color-stop(1,#74D04C)) repeat scroll 0 0 transparent;
	background: -webkit-linear-gradient(top, #9BDD62 0%, #74D04C 100%) repeat scroll 0 0 transparent;
	background: -moz-linear-gradient(top, #9BDD62 0%, #74D04C 100%) repeat scroll 0 0 transparent;
	background: -ms-linear-gradient(top, #9BDD62 0%, #74D04C 100%) repeat scroll 0 0 transparent;
	background: -o-linear-gradient(top, #9BDD62 0%, #74D04C 100%) repeat scroll 0 0 transparent; }

.barColorRed {
          border: 1px solid #c41f1f;
          box-shadow: 0 1px 0 0 #c41f1f inset, 0 -1px 1px #f79b9b inset;
	background: #c41f1f;
          background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0,#c41f1f), color-stop(1,#f79b9b)) repeat scroll 0 0 transparent;
	background: -webkit-linear-gradient(top, #c41f1f 0%, #f79b9b 100%) repeat scroll 0 0 transparent;
	background: -moz-linear-gradient(top, #c41f1f 0%, #f79b9b 100%) repeat scroll 0 0 transparent;
	background: -ms-linear-gradient(top, #c41f1f 0%, #f79b9b 100%) repeat scroll 0 0 transparent;
	background: -o-linear-gradient(top, #c41f1f 0%, #f79b9b 100%) repeat scroll 0 0 transparent; }

.barColorOrange {
          border: 1px solid #c41f1f;
          box-shadow: 0 1px 0 0 #c41f1f inset, 0 -1px 1px #f79b9b inset;
          background: #e53500;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0,#e53500), color-stop(1,#f78c3b)) repeat scroll 0 0 transparent;
	background: -webkit-linear-gradient(top, #e53500 0%, #f78c3b 100%) repeat scroll 0 0 transparent;
	background: -moz-linear-gradient(top, #e53500 0%, #f78c3b 100%) repeat scroll 0 0 transparent;
	background: -ms-linear-gradient(top, #e53500 0%, #f78c3b 100%) repeat scroll 0 0 transparent;
	background: -o-linear-gradient(top, #e53500 0%, #f78c3b 100%) repeat scroll 0 0 transparent; }

.progressText {
	width: 100%;
	background: transparent;
	line-height: 16px;
	font-size: 14px;
	color: #000;
	font-weight: bold;
	text-align: center;
	position: relative;
	z-index: 1;
}

JavaScript:-

function RenderProgressBar() {

 var progressBar = $('.progressBar');
 if(progressBar.length > 0) {
 progressBar.hide();
 progressBar.each(function() {

 var progressBarObject = $(this);

 // Get the current progress status
 var currProgress = parseFloat($.trim($(this).attr('data-progress')));
 currProgress = currProgress.toString() != "NaN" ? currProgress : 0;

 // Get the max progress possible
 var maxProgress = parseFloat($.trim($(this).attr('data-max-progress')));
 maxProgress = maxProgress.toString() != "NaN" ? maxProgress : 0;

 // Get the flag weather to show the extra information or not
 var showExtraInfo = $.trim($(this).attr('data-show-extra-info'));
 showExtraInfo = showExtraInfo.toString()!== "N";

 // Calculate the progress in percentage
 var progress = parseInt((currProgress/maxProgress)*100);

 // Shape the styling for progress bar as per screen resolution and progress status
 var textFont = '12';
 if(parseInt(progressBarObject.width()) < 200)
 textFont = '10';

 var style = 'width:'+progress+'%';
 var progressText = progress + "%";
 if(showExtraInfo)
 progressText += " ("+currProgress+" of "+maxProgress+" completed)";
 var barColor = 'barColorRed';
 if(progress === 100)
 barColor = 'barColorGreen';
 else if(progress > 50)
 barColor = 'barColorOrange';
 else if(progress == 0)
 style = 'width:'+progress+'%; border-width: 0px;';

 // Show the progress bar
 progressBarObject.html('<div class="progressText" style="font-size:'+textFont+'px;">'+progressText+'</div>'+
 '<div class="progressBarIndicator '+barColor+'" style="'+style+'"></div>').show();
 });
 }

}

var data = {
 data1: {
 progress: "40",
 maxprogress: "100",
 flag: "N"
 },
 data2: {
 progress: "40",
 maxprogress: "100",
 flag: "N"
 },
 data3: {
 progress: "40",
 maxprogress: "100",
 flag: "N"
 },
 data4: {
 progress: "100",
 maxprogress: "100",
 flag: "Y"
 }
}
$('body').html($('#sampleTmpl').tmpl(data));
RenderProgressBar();

We can now use the function and the simple html format to achieve the above result.

Written By: Ashis Kumar, Software Developer, Mindfire Solutions

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s