# VBForums CodeBank > CodeBank - ASP / ASP.NET / MVC / Web API >  Handling progress bar HTML5 with a web method.

## sapator

What we have here is a way to communicate to the progress bar, so we can use it on server code.
I assume that the data will come from a server or xml file or anything but for the shake of this example i do a manual add. You will have to modify it as when to start the time, etc but this is the basics.
Note that ( i haven't searched) if we are able to get an image download-upload progress from server side then we can modify this to an image download-uploader.

We create a vb webpage with a web method and a class to use the web method:


```
Imports System.Web.Script.Serialization
Imports System.Web.Script.Services

Public Class WebForm1
    Inherits System.Web.UI.Page

    <System.Web.Services.WebMethod(BufferResponse:=False)> _
     <ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _
    Public Shared Function Gettime(strtimeval As String) As List(Of timeclock)
        'implementation code
        Dim myclock As New List(Of timeclock)()

        ' Call the sql,xml and retrieve next value, etc...
        'For this example i do it manually
        Dim i As Integer = CInt(strtimeval)
        
       'Lame check here.I assume values of 10 in every call
        If i = 100 Then i = 0 'loop time
        i = i + 10

        'index not actually needed here
        myclock.Add(New timeclock("0", i.ToString))

        Dim lstItems As List(Of timeclock) = New JavaScriptSerializer().ConvertToType(Of List(Of timeclock))(myclock)
        Return lstItems
    End Function

End Class
Public Class timeclock
    Private index As String

    Public timerval As String

    Public Sub New(index As String, timerval As String)
        Me.index = index
        Me.timerval = timerval
    End Sub
End Class
```

Now we call this web method and feed the progress bar(must import Jquery):



```
  <script type="text/javascript">


        var myVar = setInterval(function () { myTimer() }, 2000);
        function myTimer() {
         
            $.ajax({
                type: "POST",
                url: "WebForm1.aspx/Gettime",
                data: "{strtimeval:'" + document.getElementById('pb1').value + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    try {
                        var oRetVal = response.d;
                        $.each(oRetVal, function (index, timerval) {
                            document.getElementById('pb1').value = timerval.timerval;                          
                        }
                        );
                    }
                    catch (ex) {
                        alert(ex.message);
                    }

                },
                failure: function (msg) {                
                    alert(msg);
                }
            });
         
        }
       

</script>
</head>  

<body>
    <form id="form1" runat="server">
    <div>
        <br />
           <p id="demo"></p>
        <br />
    <progress max="100" value="0" id="pb1"></progress>
    </div>
    </form>
</body>
```

Edit: Will only work on Html5 browsers (iexplorer 9 and below is, as usual, not working (will give you an undefined progress bar).

----------

