Member Avatar for bhagvad30

Hi
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 because: speeling mistake.
  • 2 Contributors
  • 7 Replies
  • 1K Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by bhagvad30
Member Avatar for JorgeM

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
Member Avatar for bhagvad30

Hi JorgeM,

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

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

Have you tried using a different browser?

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

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.

Member Avatar for bhagvad30

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

Edited by bhagvad30
Member Avatar for JorgeM

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
Member Avatar for bhagvad30 
<!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>
<head>
    <title></title>
    <style type="text/css">
        /*Start Main Overlay CSS*/
        .overlay
        {
            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;
        }
        .progress-bar
        {
            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;
        }
        .modal-progress
        {
            position: absolute;
            top: 40%;
            left: 50%;
            margin: -11px 0 0 -150px;
            color: #990000;
            font-weight: bold;
            font-size: 14px;
        }
        /*End Main Overlay CSS*/
    </style>
    <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);

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

check with this code.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.