Progress Bar Using Web Application In TypeScript

In this article, I will explain how to create a progress bar 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 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>

<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: 111px;

        }

        .auto-style2 {

            width: 11px;

        }

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

};

//@ sourceMappingURL=app.js.map

 

Output

 

Animation1.gif

 

Reference By

http://www.typescriptlang.org/