Progress Bar Using Web Application In TypeScript

Nitin Bhardwaj
11y
12.2k
0
0
100
Article

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 progressbar in TypeScript. In this example we develop a progress function and this function calls an onload 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>

.auto-style1 {

width: 111px;

}

.auto-style2 {

width: 11px;

}

</style>

</head>

<body>

ProgressBar in TypeScript<br />

<tr>

</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();

};

//@ sourceMappingURL=app.js.map

Output

Reference By

http://www.typescriptlang.org/

Up Next

Ebook Download

View all

Test

Read by 16 people

Download Now!

Learn

View all