Progress Bar Using Web Application In TypeScript

Introduction

A progress bar is a component in a GUI. It used to visualize the progression of an extended computer operation, such as a file transfer, download or installation. Sometimes, the graphic is accompanied by a textual representation of the progress in a percent format. In this article, we will create a progress bar using TypeScript.

The following example shows how to use a progress bar in TypeScript. In this example, we develop a progress function and this function calls an unload event of the window so when the page is loaded the progress function will be called. In this function, first we change the color of the first column, then we call another progress1 function using setTimeout and then we change the color of the second column and so on.

Step 1

Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click "HTML Application for TypeScript" under Visual C#.

Give the name of your application as "ProgressBar" and then click "Ok".

Step 2

After Step 1, right-click on "ProgressBar". A pop up window is opened. Click on "Add" -> "New Item" -> "Web From". Give the name of your WebForm "ProgressBar_Demo.aspx" and then click "Ok".

Step 3

After this session the project has been created; a new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file, CSS file, and aspx files.

Coding

app.ts

class Progress_bar {
progress() {
document.getElementById('td1').style.backgroundColor = '#82E1BD';
setTimeout(() => {
this.progress1();
}, 300);
}
progress1() {
document.getElementById('td2').style.backgroundColor = '#82E1BD';
setTimeout(() => {
this.progress2();
}, 300);
}
progress2() {
document.getElementById('td3').style.backgroundColor = '#82E1BD';
setTimeout(() => {
this.progress3();
}, 300);
}
progress3() {
document.getElementById('td4').style.backgroundColor = '#82E1BD';
setTimeout(() => {
this.progress4();
}, 300);
}
progress4() {
document.getElementById('td5').style.backgroundColor = '#82E1BD';
setTimeout(() => {
this.progress5();
}, 300);
}
progress5() {
document.getElementById('td6').style.backgroundColor = '#82E1BD';
setTimeout(() => {
this.progress6();
}, 300);
}
progress6() {
document.getElementById('td7').style.backgroundColor = '#82E1BD';
setTimeout(() => {
this.progress7();
}, 300);
}
progress7() {
document.getElementById('td8').style.backgroundColor = '#82E1BD';
setTimeout(() => {
this.progress();
}, 300);
}
progress8() {
document.getElementById('td8').style.backgroundColor = '#82E1BD';
}
}
window.onload = () => {
var obj = new Progress_bar();
obj.progress();
};

ProgressBar_Demo.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProgressBar_Demo.aspx.cs" Inherits="ProgressBar.ProgressBar_Demo" %>
<
!DOCTYPE html >
<
html xmlns = "http://www.w3.org/1999/xhtml" >
<
head runat = "server" >
<
title > < /title>
<
script src = "app.js" > < /script>
<
style type = "text/css" >
.auto - style1 {
width: 111 px;
}
.auto - style2 {
width: 11 px;
}
<
/style>
<
/head>
<
body >
<
form id = "form1"
runat = "server" >
<
div style = "border-style: none; color: #0000FF; font-style: italic; font-weight: normal; font-size: x-large;" >
ProgressBar in TypeScript < br / >
<
table style = "border-style:none"
class = "auto-style1" >
<
tr >
<
td id = "td1"
style = "border-style:none; color: #000000;"
class = "style8" > L < /td>
<
td id = "td2"
style = "border-style:none; color: #000000;"
class = "auto-style2" > o < /td>
<
td id = "td3"
style = "border-style:none; color: #000000;"
class = "auto-style2" > a < /td>
<
td id = "td4"
style = "border-style:none; color: #000000;"
class = "auto-style2" > d < /td>
<
td id = "td5"
style = "border-style:none; color: #000000;"
class = "auto-style2" > i < /td>
<
td id = "td6"
style = "border-style:none; color: #000000;"
class = "auto-style2" > n < /td>
<
td id = "td7"
style = "border-style:none; color: #000000;"
class = "auto-style2" > g < /td>
<
td id = "td8"
style = "border-style:none; color: #000000;"
class = "auto-style2" > ... < /td>
<
/tr>
<
/table>
<
/div>
<
/form>
<
/body>
<
/html>

app.js

var Progress_bar = (function() {
function Progress_bar() {}
Progress_bar.prototype.progress = function() {
var _this = this;
document.getElementById('td1').style.backgroundColor = '#82E1BD';
setTimeout(function() {
_this.progress1();
}, 300);
};
Progress_bar.prototype.progress1 = function() {
var _this = this;
document.getElementById('td2').style.backgroundColor = '#82E1BD';
setTimeout(function() {
_this.progress2();
}, 300);
};
Progress_bar.prototype.progress2 = function() {
var _this = this;
document.getElementById('td3').style.backgroundColor = '#82E1BD';
setTimeout(function() {
_this.progress3();
}, 300);
};
Progress_bar.prototype.progress3 = function() {
var _this = this;
document.getElementById('td4').style.backgroundColor = '#82E1BD';
setTimeout(function() {
_this.progress4();
}, 300);
};
Progress_bar.prototype.progress4 = function() {
var _this = this;
document.getElementById('td5').style.backgroundColor = '#82E1BD';
setTimeout(function() {
_this.progress5();
}, 300);
};
Progress_bar.prototype.progress5 = function() {
var _this = this;
document.getElementById('td6').style.backgroundColor = '#82E1BD';
setTimeout(function() {
_this.progress6();
}, 300);
};
Progress_bar.prototype.progress6 = function() {
var _this = this;
document.getElementById('td7').style.backgroundColor = '#82E1BD';
setTimeout(function() {
_this.progress7();
}, 300);
};
Progress_bar.prototype.progress7 = function() {
var _this = this;
document.getElementById('td8').style.backgroundColor = '#82E1BD';
setTimeout(function() {
_this.progress();
}, 300);
};
Progress_bar.prototype.progress8 = function() {
document.getElementById('td8').style.backgroundColor = '#82E1BD';
};
return Progress_bar;
})();
window.onload = function() {
var obj = new Progress_bar();
obj.progress();
};

Output

Referenced By

http://www.typescriptlang.org/