How to show Processing Image with Update Progress control

<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="100">

        <ProgressTemplate>

<%--            <asp:Image ID="Image1" runat="server" Height="77px" ImageUrl="~/images/brocolli.jpg"

                Width="166px" />--%>

                        <div style="background-color: Gray; filter:alpha(opacity=60); opacity:0.60; width: 100%; top: 0px; left: 0px; position: fixed; height: 100%;">

        </div>

          <div style="margin:auto;

              font-family:Trebuchet MS;

              filter: alpha(opacity=100);

              opacity: 1;

              font-size:small;

              vertical-align: middle;

              top: 45%;

              position: fixed;

              right: 45%;

              color: #275721;

              text-align: center;

              background-color: White;

              height: 100px;

              ">

              <br />

             

                <table style=" background-color: White; font-family: Sans-Serif; text-align: center; border: solid 1px #275721; color: #275721; width: inherit; height: inherit; padding: 15px;">

                <tr>

                <td style=" text-align: inherit;"><img src="images/RoundProgress.gif" alt="Loading"  /></td>

                <td style=" text-align: inherit;"><span style="font-family: Sans-Serif; font-size: medium; font-weight: bold; font">Loading...</span></td>

                </tr>

                </table>

        </div>

        </ProgressTemplate>

    </asp:UpdateProgress>