www.webdeveloper.com
Results 1 to 10 of 10

Thread: Show progress bar on element visible

  1. #1
    Join Date
    Feb 2010
    Posts
    7

    Question Show progress bar on element visible

    Please help me with this simple progress bar to appear on page when visible. I have the script from site: http://css-tricks.com/slide-in-as-yo...ll-down-boxes/

    Here is my html CSS3 progress bar:

    HTML Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>CSS3 Loading Animation</title>
    <style type="text/css">
    body {
    	background: #161616 url(pattern_40.gif) top left repeat;
    	margin: 0;
    	padding: 0;
    	font: 12px normal Verdana, Arial, Helvetica, sans-serif;
    	height: 100%;
    }
    
    * {margin: 0; padding: 0; outline: none;}
    
    img {border: none;}
    
    a { 
    	text-decoration:none; 
    	color:#00c6ff;
    }
    
    h1 {
    	font: 4em normal Arial, Helvetica, sans-serif;
    	padding: 20px;	margin: 0;
    	text-align:center;
    	color:#bbb;
    }
    
    h1 small{
    	font: 0.2em normal  Arial, Helvetica, sans-serif;
    	text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em;
    	display: block;
    }
    
    .container {width: 960px; margin: 0 auto; overflow: hidden;}
    
    /* PROGRESS BAR */
    
    ul#progress {
    	list-style:none;
    	width:125px;
    	margin:0 auto;
    	padding-top:50px;
    	padding-bottom:50px;
    }
    ul#progress li {
    	float:left;
    	position:relative;
    	width:6px;
    	height:6px;
    	border:1px solid #fff;
    	border-radius:50px;
    	margin-left:1px;
    	border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; 
    	background:#000;
    }
    
    ul#progress li:first-child { margin-left:0; }
    
    .running .ball {
    	background-color:#2187e7; 
    	background-image: -moz-linear-gradient(90deg, #2187e7 10%, #a0eaff); 
    	background-image: -webkit-linear-gradient(90deg, #2187e7 10%, #a0eaff); 
    
    	width:6px;
    	height:6px;
    	border-radius:50px;
    	-moz-transform:scale(0);
    	-webkit-transform:scale(0);
    	
    	-moz-animation:loading 1s linear forwards;
    	-webkit-animation:loading 1s linear forwards;
    }
    
    .running .pulse {
    	width:6px;
    	height:6px;
    	border-radius:30px;
    	border: 1px solid #00c6ff;
    	box-shadow: 0 0 5px #00c6ff;
    	position:absolute;
    	top:-1px;
    	left:-1px;
    	-moz-transform:scale(0);
    	-webkit-transform:scale(0);
    	
    	-webkit-animation:pulse 1s ease-out;
    	-moz-animation:pulse 1s ease-out;
    }
    
    #layer1 { -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; }
    #layer2 { -moz-animation-delay:1s; -webkit-animation-delay:1s; }
    #layer3 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
    #layer4 { -moz-animation-delay:2s; -webkit-animation-delay:2s; }
    #layer5 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; }
    
    #layer7 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
    #layer8 { -moz-animation-delay:2s; -webkit-animation-delay:2s; }
    #layer9 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; }
    #layer10 { -moz-animation-delay:3s; -webkit-animation-delay:3s; }
    #layer11 { -moz-animation-delay:3.5s; -webkit-animation-delay:3.5s; }
    
    #layer12 { -moz-animation-delay:3s; -webkit-animation-delay:3s; }
    #layer13 { -moz-animation-delay:3.5s; -webkit-animation-delay:3.5s; }
    #layer14 { -moz-animation-delay:4s; -webkit-animation-delay:4s; }
    #layer15 { -moz-animation-delay:4.5s; -webkit-animation-delay:4.5s; }
    #layer16 { -moz-animation-delay:5s; -webkit-animation-delay:5s; }
    
    #layer17 { -moz-animation-delay:4s; -webkit-animation-delay:4s; }
    #layer18 { -moz-animation-delay:4.5s; -webkit-animation-delay:4.5s; }
    #layer19 { -moz-animation-delay:5s; -webkit-animation-delay:5s; }
    #layer20 { -moz-animation-delay:5.5s; -webkit-animation-delay:5.5s; }
    #layer21 { -moz-animation-delay:6s; -webkit-animation-delay:6s; }
    
    @-moz-keyframes loading {
    	0%{-moz-transform:scale(0,0);}
    	100%{-moz-transform:scale(1,1);}	
    }
    
    @-webkit-keyframes loading {
    	0%{-webkit-transform:scale(0,0);}
    	100%{-webkit-transform:scale(1,1);}	
    }
    
    
    @-moz-keyframes pulse {
    	0%   {-moz-transform: scale(0);opacity: 0;}
        10%  {-moz-transform: scale(1);opacity: 0.5;}
    	50%  {-moz-transform: scale(1.75);opacity: 0;}
        100% {-moz-transform: scale(0);opacity: 0;}  
    }
    
    @-webkit-keyframes pulse {
    	0%   {-webkit-transform: scale(0);opacity: 0;}
    	10%  {-webkit-transform: scale(1);opacity: 0.5;}
        50%  {-webkit-transform: scale(1.75);opacity: 0;}
        100% {-webkit-transform: scale(0);opacity: 0;}    
    }
    
    /* Trigger button for javascript */
    
    .trigger, .triggerFull, .triggerBar {
    	background: #000000;
    	background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
    	background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
    	border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; 
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 0.8em;
    	text-decoration: none;
    	text-transform: lowercase;
    	text-align: center;
    	color: #fff;
    	padding: 10px;
    	border-radius: 3px;
    	display: block;
    	margin: 0 auto;
    	width: 140px;
    }
    		
    .trigger:hover, .triggerFull:hover, .triggerBar:hover {
    	background: -moz-linear-gradient(top, #202020 0%, #161616 100%);
    	background: -webkit-linear-gradient(top, #202020 0%, #161616 100%);
    }
    
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
    <script>
    
    
    
    (function($) {
    
      /**
       * Copyright 2012, Digital Fusion
       * Licensed under the MIT license.
       * http://teamdf.com/jquery-plugins/license/
       *
       * @author Sam Sehnert
       * @desc A small plugin that checks whether elements are within
       *     the user visible viewport of a web browser.
       *     only accounts for vertical position, not horizontal.
       */
    
      $.fn.visible = function(partial) {
        
          var $t            = $(this),
              $w            = $(window),
              viewTop       = $w.scrollTop(),
              viewBottom    = viewTop + $w.height(),
              _top          = $t.offset().top,
              _bottom       = _top + $t.height(),
              compareTop    = partial === true ? _bottom : _top,
              compareBottom = partial === true ? _top : _bottom;
        
        return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
    
      };
        
    })(jQuery);
    
    var win = $(window);
    
    var allMods = $(".module");
    
    allMods.each(function(i, el) {
      var el = $(el);
      if (el.visible(true)) {
        el.addClass("already-visible"); 
      } 
    });
    
    win.scroll(function(event) {
      
      allMods.each(function(i, el) {
        var el = $(el);
        if (el.visible(true)) {
          el.addClass("come-in"); 
        } 
      });
      
    });
    /*** END OF SCROLL-VISIBLE PLUGIN ***/
    		
    $(document).ready(function() {
    	$('#progress').removeClass('running');	    
    		$('.trigger').click(function() {
    			$('#progress').removeClass('running').delay(10).queue(function(next){
    				$(this).addClass('running');
    		        next();
    		    });
    		    return false;
    		});
    });
    
    </script>
    <link rel="canonical" href="http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Loading-Animation/index.html" />
    </head>
    <body>
    <h1>CSS3 Loading Animation<small>Tutorial by Alessio Atzeni | <a href="http://www.alessioatzeni.com/blog/css3-loading-animation/">View Tutorial</a></small></h1>
    <!-- PROGRESS BALL LOADER -->
    <div class="container">
    	<ul id="progress">
        <li><div id="layer1" class="ball"></div><div id="layer7" class="pulse"></div></li>
        <li><div id="layer2" class="ball"></div><div id="layer8" class="pulse"></div></li>
        <li><div id="layer3" class="ball"></div><div id="layer9" class="pulse"></div></li>
        <li><div id="layer4" class="ball"></div><div id="layer10" class="pulse"></div></li>
        <li><div id="layer5" class="ball"></div><div id="layer11" class="pulse"></div></li>
    	    <li><div id="layer12" class="ball"></div><div id="layer17" class="pulse"></div></li>
        <li><div id="layer13" class="ball"></div><div id="layer18" class="pulse"></div></li>
        <li><div id="layer14" class="ball"></div><div id="layer19" class="pulse"></div></li>
        <li><div id="layer15" class="ball"></div><div id="layer20" class="pulse"></div></li>
        <li><div id="layer16" class="ball"></div><div id="layer21" class="pulse"></div></li>
        </ul>
    	<a class="trigger" href="#">Start/Restart Animation</a>
    </div>
    <!-- END PROGRESS BALL LOADER -->
    </body>
    </html>
    I'm sure there is just some little change to be done in the script above, please help thank you so much in advance!
    Last edited by Morphos; 03-21-2014 at 11:06 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    I'm not exactly sure on what you want, but I'll take a guess.

    At the end of the javascript in your code, just replace
    Code:
    $(document).ready(function() {
    	$('#progress').removeClass('running');	    
    	$('.trigger').click(function() {
    		$('#progress').removeClass('running').delay(10).queue(function(next){
    			$(this).addClass('running');
    			next();
    		});
    		return false;
    	});
    });
    with
    Code:
    $(document).ready(function() {
    	$('#progress').removeClass('running');	    
    	$('.trigger').click(function() {
    		$('#progress').removeClass('running').delay(10).queue(function(next){
    			$(this).addClass('running');
    			next();
    		});
    		return false;
    	});
    	$('#progress').removeClass('running').delay(10).queue(function(next){
    		$(this).addClass('running');
    		next();
    	});
    });
    All this really does is add the code that triggers when you click the button to the document ready function directly so that when the page has loaded the animation starts.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Feb 2010
    Posts
    7
    Hi Sup3rkirby, thank you for your quick reply, but I meant to modify the script above that: SCROLL-VISIBLE PLUGIN. It's a script that is supposed to make it that the class that is called and is attached to a element, like a progress bar, it will start the element only after it calculates that it's visible on the screen. So for example if the bar were to be totally deep down it would start animate just when the user comes to that part of page by scrolling.

    So far I tried to change the executing part like this:
    Code:
    })(jQuery);
    
    var win = $(window);
    
    var allMods = $("#progress");
    
    allMods.each(function(i, el) {
      var el = $(el);
      if (el.visible(true)) {
        el.addClass("already-visible"); 
      } 
    });
    
    win.scroll(function(event) {
      
      allMods.each(function(i, el) {
        var el = $(el);
        if (el.visible(true)) {
          el.addClass("running"); 
        } 
      });
      
    });
    But it still doesn't work..(I changed the .module to the correct class applied in on the element which is #progress and also further in the el.addClass I put running, which should start the process, but nothing happens)...
    Last edited by Morphos; 03-21-2014 at 02:01 PM.

  4. #4
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    I feel like I need to ask: what exactly is it that you are wanting to happen?

    As far as a scenario goes, you are telling me that if the progress bar is 'below the fold' (meaning it is not visible on the page when it loads and instead you must scroll down to see it) then the progress bar will not start. However, using the code you provided, after I made the change in my last post I noticed the progress bar will start when the page loads (whether it is visible or not).

    So this makes me thing perhaps you are asking about something else...
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  5. #5
    Join Date
    Feb 2010
    Posts
    7
    Yes it starts, but I don't want it to start after the page loads. I want it to wait until the user that visits the page scrolls to the progress bar to actually see that nice animation. If it loads right away when he lands on the page he will never see it because I plan to place the progress bar a few pages down the actual page.

    I want it to start loading when he scrolls the page to the bottom and really his screen is at the progress bar and he can see it. The script is supposed to do the calculation so that it knows at which point the screens is and such. I just don't know why it's not working.

  6. #6
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    I went and found the source code for that plugin you were using because it seems that some of the changes you made may have been partly why it wasn't working. The other thing was the code to set the window.scroll event needed to be moved.

    In the end your source code will look something like this (tested and working):
    HTML Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>CSS3 Loading Animation</title>
    <style type="text/css">
    body {
    	background: #161616 url(pattern_40.gif) top left repeat;
    	margin: 0;
    	padding: 0;
    	font: 12px normal Verdana, Arial, Helvetica, sans-serif;
    	height: 100%;
    }
    
    * { margin: 0; padding: 0; outline: none; }
    
    img { border: none; }
    
    a { 
    	text-decoration:none; 
    	color:#00c6ff;
    }
    
    h1 {
    	font: 4em normal Arial, Helvetica, sans-serif;
    	padding: 20px;	margin: 0;
    	text-align:center;
    	color:#bbb;
    }
    
    h1 small{
    	font: 0.2em normal  Arial, Helvetica, sans-serif;
    	text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em;
    	display: block;
    }
    
    .container {width: 960px; margin: 0 auto; overflow: hidden;}
    
    /* PROGRESS BAR */
    
    ul#progress {
    	list-style:none;
    	width:125px;
    	margin:0 auto;
    	padding-top:50px;
    	padding-bottom:50px;
    }
    ul#progress li {
    	float:left;
    	position:relative;
    	width:6px;
    	height:6px;
    	border:1px solid #fff;
    	border-radius:50px;
    	margin-left:1px;
    	border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; 
    	background:#000;
    }
    
    ul#progress li:first-child { margin-left:0; }
    
    .running .ball {
    	background-color:#2187e7; 
    	background-image: -moz-linear-gradient(90deg, #2187e7 10%, #a0eaff); 
    	background-image: -webkit-linear-gradient(90deg, #2187e7 10%, #a0eaff); 
    
    	width:6px;
    	height:6px;
    	border-radius:50px;
    	-moz-transform:scale(0);
    	-webkit-transform:scale(0);
    	
    	-moz-animation:loading 1s linear forwards;
    	-webkit-animation:loading 1s linear forwards;
    }
    
    .running .pulse {
    	width:6px;
    	height:6px;
    	border-radius:30px;
    	border: 1px solid #00c6ff;
    	box-shadow: 0 0 5px #00c6ff;
    	position:absolute;
    	top:-1px;
    	left:-1px;
    	-moz-transform:scale(0);
    	-webkit-transform:scale(0);
    	
    	-webkit-animation:pulse 1s ease-out;
    	-moz-animation:pulse 1s ease-out;
    }
    
    #layer1 { -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; }
    #layer2 { -moz-animation-delay:1s; -webkit-animation-delay:1s; }
    #layer3 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
    #layer4 { -moz-animation-delay:2s; -webkit-animation-delay:2s; }
    #layer5 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; }
    
    #layer7 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
    #layer8 { -moz-animation-delay:2s; -webkit-animation-delay:2s; }
    #layer9 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; }
    #layer10 { -moz-animation-delay:3s; -webkit-animation-delay:3s; }
    #layer11 { -moz-animation-delay:3.5s; -webkit-animation-delay:3.5s; }
    
    #layer12 { -moz-animation-delay:3s; -webkit-animation-delay:3s; }
    #layer13 { -moz-animation-delay:3.5s; -webkit-animation-delay:3.5s; }
    #layer14 { -moz-animation-delay:4s; -webkit-animation-delay:4s; }
    #layer15 { -moz-animation-delay:4.5s; -webkit-animation-delay:4.5s; }
    #layer16 { -moz-animation-delay:5s; -webkit-animation-delay:5s; }
    
    #layer17 { -moz-animation-delay:4s; -webkit-animation-delay:4s; }
    #layer18 { -moz-animation-delay:4.5s; -webkit-animation-delay:4.5s; }
    #layer19 { -moz-animation-delay:5s; -webkit-animation-delay:5s; }
    #layer20 { -moz-animation-delay:5.5s; -webkit-animation-delay:5.5s; }
    #layer21 { -moz-animation-delay:6s; -webkit-animation-delay:6s; }
    
    @-moz-keyframes loading {
    	0%{-moz-transform:scale(0,0);}
    	100%{-moz-transform:scale(1,1);}	
    }
    
    @-webkit-keyframes loading {
    	0%{-webkit-transform:scale(0,0);}
    	100%{-webkit-transform:scale(1,1);}	
    }
    
    
    @-moz-keyframes pulse {
    	0%   {-moz-transform: scale(0);opacity: 0;}
      10%  {-moz-transform: scale(1);opacity: 0.5;}
    	50%  {-moz-transform: scale(1.75);opacity: 0;}
      100% {-moz-transform: scale(0);opacity: 0;}  
    }
    
    @-webkit-keyframes pulse {
    	0%   {-webkit-transform: scale(0);opacity: 0;}
    	10%  {-webkit-transform: scale(1);opacity: 0.5;}
      50%  {-webkit-transform: scale(1.75);opacity: 0;}
      100% {-webkit-transform: scale(0);opacity: 0;}    
    }
    
    /* Trigger button for javascript */
    
    .trigger, .triggerFull, .triggerBar {
    	background: #000000;
    	background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
    	background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
    	border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; 
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 0.8em;
    	text-decoration: none;
    	text-transform: lowercase;
    	text-align: center;
    	color: #fff;
    	padding: 10px;
    	border-radius: 3px;
    	display: block;
    	margin: 0 auto;
    	width: 140px;
    }
    		
    .trigger:hover, .triggerFull:hover, .triggerBar:hover {
    	background: -moz-linear-gradient(top, #202020 0%, #161616 100%);
    	background: -webkit-linear-gradient(top, #202020 0%, #161616 100%);
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
    <script>
    (function($){
        /**
         * Copyright 2012, Digital Fusion
         * Licensed under the MIT license.
         * http://teamdf.com/jquery-plugins/license/
         *
         * @author Sam Sehnert
         * @desc A small plugin that checks whether elements are within
         *       the user visible viewport of a web browser.
         *       only accounts for vertical position, not horizontal.
         */
        var $w = $(window);
        $.fn.visible = function(partial,hidden,direction) {
    			if (this.length < 1) return;
    
    			var $t        = this.length > 1 ? this.eq(0) : this,
    					t         = $t.get(0),
    					vpWidth   = $w.width(),
    					vpHeight  = $w.height(),
    					direction = (direction) ? direction : 'both',
    					clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true;
    
    			if (typeof t.getBoundingClientRect === 'function'){
    				// Use this native browser method, if available.
    				var rec = t.getBoundingClientRect(),
    						tViz = rec.top    >= 0 && rec.top    <  vpHeight,
    						bViz = rec.bottom >  0 && rec.bottom <= vpHeight,
    						lViz = rec.left   >= 0 && rec.left   <  vpWidth,
    						rViz = rec.right  >  0 && rec.right  <= vpWidth,
    						vVisible   = partial ? tViz || bViz : tViz && bViz,
    						hVisible   = partial ? lViz || lViz : lViz && rViz;
    
    				if(direction === 'both')
    						return clientSize && vVisible && hVisible;
    				else if(direction === 'vertical')
    						return clientSize && vVisible;
    				else if(direction === 'horizontal')
    						return clientSize && hVisible;
    			} else {
    				var viewTop         = $w.scrollTop(),
    						viewBottom      = viewTop + vpHeight,
    						viewLeft        = $w.scrollLeft(),
    						viewRight       = viewLeft + vpWidth,
    						offset          = $t.offset(),
    						_top            = offset.top,
    						_bottom         = _top + $t.height(),
    						_left           = offset.left,
    						_right          = _left + $t.width(),
    						compareTop      = partial === true ? _bottom : _top,
    						compareBottom   = partial === true ? _top : _bottom,
    						compareLeft     = partial === true ? _right : _left,
    						compareRight    = partial === true ? _left : _right;
    
    				if(direction === 'both')
    						return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
    				else if(direction === 'vertical')
    						return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop));
    				else if(direction === 'horizontal')
    						return !!clientSize && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
    			}
        };
    		
    		
    	if ($("#progress").visible(true)) $("#progress").removeClass('running').delay(10).queue(function(next){	$(this).addClass('running'); next(); });
    
    	$w.scroll(function(event) {
    		if($("#progress").visible(true)) $("#progress").removeClass('running').delay(10).queue(function(next){	$(this).addClass('running'); next(); });
    	});
    })(jQuery);
    
    		
    $(document).ready(function() {
    	$('#progress').removeClass('running');	    
    	$('.trigger').click(function() {
    		$('#progress').removeClass('running').delay(10).queue(function(next){
    			$(this).addClass('running');
    			next();
    		});
    		return false;
    	});
    });
    </script>
    <link rel="canonical" href="http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Loading-Animation/index.html" />
    </head>
    <body>
    <h1>CSS3 Loading Animation<small>Tutorial by Alessio Atzeni | <a href="http://www.alessioatzeni.com/blog/css3-loading-animation/">View Tutorial</a></small></h1>
    
    <!-- PROGRESS BALL LOADER -->
    <div class="container">
    	<ul id="progress">
        <li><div id="layer1" class="ball"></div><div id="layer7" class="pulse"></div></li>
        <li><div id="layer2" class="ball"></div><div id="layer8" class="pulse"></div></li>
        <li><div id="layer3" class="ball"></div><div id="layer9" class="pulse"></div></li>
        <li><div id="layer4" class="ball"></div><div id="layer10" class="pulse"></div></li>
        <li><div id="layer5" class="ball"></div><div id="layer11" class="pulse"></div></li>
    	  <li><div id="layer12" class="ball"></div><div id="layer17" class="pulse"></div></li>
        <li><div id="layer13" class="ball"></div><div id="layer18" class="pulse"></div></li>
        <li><div id="layer14" class="ball"></div><div id="layer19" class="pulse"></div></li>
        <li><div id="layer15" class="ball"></div><div id="layer20" class="pulse"></div></li>
        <li><div id="layer16" class="ball"></div><div id="layer21" class="pulse"></div></li>
        </ul>
    	<a class="trigger" href="#">Start/Restart Animation</a>
    </div>
    <!-- END PROGRESS BALL LOADER -->
    </body>
    </html>
    fyi, I had exceeded the post character count so I had to cut out a bunch of <br> tags. You can add those in to see how it works when you scroll.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  7. #7
    Join Date
    Feb 2010
    Posts
    7
    Wow, you're incredible thank you sooo much, now it works exactly how I wanted. thnks again

  8. #8
    Join Date
    Feb 2010
    Posts
    7
    And one more question, is it possible to make it work in IE. At least my IE8 simply directly shows all the blue bars, without any animation and with a bad graphic design.

  9. #9
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,223
    Javascript Frameworks forum is for JQuery help, please ask in it.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  10. #10
    Join Date
    Oct 2013
    Posts
    421
    Quote Originally Posted by Morphos View Post
    And one more question, is it possible to make it work in IE. At least my IE8 simply directly shows all the blue bars, without any animation and with a bad graphic design.
    IE8 only recognizes up to CSS2.1. It doesn't recognize CSS3 transforms. From Sup3rkirby's code:
    Code:
    @-moz-keyframes loading {
    	0%{-moz-transform:scale(0,0);}
    	100%{-moz-transform:scale(1,1);}	
    }
    
    @-webkit-keyframes loading {
    	0%{-webkit-transform:scale(0,0);}
    	100%{-webkit-transform:scale(1,1);}	
    }
    
    
    @-moz-keyframes pulse {
    	0%   {-moz-transform: scale(0);opacity: 0;}
      10%  {-moz-transform: scale(1);opacity: 0.5;}
    	50%  {-moz-transform: scale(1.75);opacity: 0;}
      100% {-moz-transform: scale(0);opacity: 0;}  
    }
    
    @-webkit-keyframes pulse {
    	0%   {-webkit-transform: scale(0);opacity: 0;}
    	10%  {-webkit-transform: scale(1);opacity: 0.5;}
    Well, you get the idea...

    And if you go to the URL in this code:
    HTML Code:
    <link rel="canonical" href="http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Loading-Animation/index.html" />
    it states:
    CSS3 Loading Animations are only visible in Firefox, Safari and Chrome
    (emphasis mine)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles