www.webdeveloper.com
Results 1 to 10 of 10

Thread: Show progress bar on element visible

Threaded View

  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 12:06 PM.

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