I am using progress .GIF image when my web page is refresh or any postback is happen i show progress bar its working fine but when data is render that time .GIF images freezes in IE Browser.

Edited by bhagvad30: speeling mistake.

2 Years
Discussion Span
Last Post by bhagvad30

I gave up on animated gifs along time ago for this exact reason. For spinners, I now use spin.js which is a javascript based spinner not a gif.

You are limited using spin.js with regards to the spinner as opposed to the flexibility of an animated gif but I have never experienced the spinner freezes again.

Edited by JorgeM


Hi JorgeM,

        I tried with spin.js , it also freeze for some time.

Do you have some sample code or link to see the behavior?

Have you tried using a different browser?

<div class='overlay' id="cleintSideOverlayMain">
            <div class="modal-progress">
                <div class="progress-bar">
                    <img id="OverlayImage" src="/images/ajax-loader.gif" />

i use

$('#cleintSideOverlayMain').css('display', 'none');

following code for display Progress bar after all my modules renderd.

its working on mozila, chrome & safari. its only stop on IE browser.


I also tried with.
1) spin.js
2) Use SetTimeout();
3) Use Iframe.
4) HTML5 Animation.

Edited by bhagvad30


Just as a test... have you tried to set up a brand new HTML doc and only include the most basic HTML markup & jQuery necessary to test this accross all browsers? if so, upload the code to jsfiddle so we can see the actual behavior.

Edited by JorgeM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <style type="text/css">
        /*Start Main Overlay CSS*/
            position: fixed;
            z-index: 999999999;
            top: 0px;
            left: 0px;
            background-color: #121212;
            width: 100%;
            height: 100%;
            filter: Alpha(Opacity=90);
            opacity: 0.9;
            -moz-opacity: 0.9;
            display: block;
            background-color: #121212;
            border: 0px solid #ccc;
            padding: 10px;
            width: 300px;
            height: 100px;
            line-height: 30px;
            text-align: center;
            filter: Alpha(Opacity=100);
            opacity: 1;
            -moz-opacity: 1;
            position: absolute;
            top: 40%;
            left: 50%;
            margin: -11px 0 0 -150px;
            color: #990000;
            font-weight: bold;
            font-size: 14px;
        /*End Main Overlay CSS*/
    <script type="text/javascript">       
        function ShowProgressBar() {            
            $('#cleintSideOverlayMain').css('display', 'block');             
            setTimeout(function () {
                for (var i = 0; i < 90000; i++) {
                    $('#lblShow').val(" abc-" + i.toString());
            }, 9000);

    <div class='overlay' id="cleintSideOverlayMain" style="display:none">
        <div class="modal-progress">
            <div class="progress-bar">
            <img id="OverlayImage" src="/images/ajax-loader.gif" />
    <input type="button" onclick="ShowProgressBar();" value="show"/>
     <input type="text" id="lblShow" value="abc" style="width:600px" />

check with this code.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.