123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
                <div class="instructions_container">
    <div class="example_links">
      
	<div class="link_category">     
	      <div class="link">
		<a class="loading-default">Show default loading indicator</a>
	       </div>
	       <div class="link">
		<a class="loading-hide">Hide default loading indicator</a>
       	       </div>
        </div>
	<div class="link_category">     
	      <div class="link">
		<a class="loading-ajax">simulate 1-second Ajax load</a>
	       </div>
        </div>
	<div class="link_category">     
	      <div class="link">
		<a class="loading-bars">show 'bars'-style loading indicator</a>
	       </div>
	       <div class="link">
		<a class="loading-hide">Hide 'bars'-style indicator</a>
       	       </div>
        </div>
     </div> 
     <div class="usage">
	Usage with jQuery load method:
        
        <pre>
jQuery('#activity_pane').showLoading();
jQuery('#activity_pane').load(
    '/path/to/my/url', 
    {},
    function() {
      //
      //this is the ajax callback 
      //
      jQuery('#activity_pane').hideLoading();
    }
);       
     </pre>

     </div>
    </div>

    <div id="activity_pane">
            Here is where we will load something via ajax.
            <br />
            This container <b>must</b> have an id attribute
    </div>
    <div style="clear:both;"></div>
            
          
!
            
              	a {
	  color: blue;
	  cursor:pointer;
          text-decoration: underline;
	}

        div.instructions_container {
	   float: left;
           width: 350px;
           margin-right: 50px;

        }

	div#activity_pane {
           float:left;
           width: 350px;
           height: 200px;
           border: 1px solid #CCCCCC;
           background-color: #EEEEEE;
 	   padding-top: 200px;
	   text-align: center;
           
        }

        div.example_links 
         .link_category {
           margin-bottom: 15px;
        }

.loading-indicator-bars {
		background-image: url('https://raw.githubusercontent.com/riverbed/flyscript-portal/master/thirdparty/showLoading/images/loading-bars.gif');
		width: 150px;
	}

.loading-indicator {
	height: 80px;
	width: 80px;
	background: url( 'https://raw.githubusercontent.com/riverbed/flyscript-portal/master/thirdparty/showLoading/images/loading.gif' );
	background-repeat: no-repeat;
	background-position: center center;
}

.loading-indicator-overlay {
	background-color: #FFFFFF;
	opacity: 0.6;
	filter: alpha(opacity = 60);
}
            
          
!
            
              /*
 * jQuery showLoading plugin v1.0
 * 
 * Copyright (c) 2009 Jim Keller
 * Context - http://www.contextllc.com
 * 
 * Dual licensed under the MIT and GPL licenses.
 *
 * Modified by <cwhite@riverbed.com> to support displaying
 * percentage complete.
 */

jQuery.fn.setLoading = function(pct) {
    var indicatorID = jQuery(this).attr('id');

    $('#loading-indicator-' + indicatorID).html(pct + '%');
}

jQuery.fn.showLoading = function(options) {
    
    var indicatorID;
    var settings = {
       	'addClass': '',
	'beforeShow': '', 
       	'afterShow': '',
       	'hPos': 'center', 
	'vPos': 'center',
       	'indicatorZIndex' : 5001, 
       	'overlayZIndex': 5000, 
	'parent': '',
       	'marginTop': 0,
       	'marginLeft': 0,
	'overlayWidth': null,
       	'overlayHeight': null
    };

    jQuery.extend(settings, options);
    
    var loadingDiv = jQuery('<div style="text-align:center"></div>');
    var overlayDiv = jQuery('<div></div>');

    //
    // Set up ID and classes
    //
    if ( settings.indicatorID ) {
	indicatorID = settings.indicatorID;
    }
    else {
	indicatorID = jQuery(this).attr('id');
    }

    //jQuery(this).resize(function(e) {
    //    alert("Change event");
    //});

    jQuery(loadingDiv).attr('id', 'loading-indicator-' + indicatorID );
    jQuery(loadingDiv).addClass('loading-indicator');

    if ( settings.addClass ){
	jQuery(loadingDiv).addClass(settings.addClass);
    }
    
    //
    // Create the overlay
    //
    jQuery(overlayDiv).css('display', 'none');
    
    // Append to body, otherwise position() doesn't work on Webkit-based browsers
    jQuery(document.body).append(overlayDiv);
    
    //
    // Set overlay classes
    //
    jQuery(overlayDiv).attr('id', 'loading-indicator-' + indicatorID + '-overlay');
    
    jQuery(overlayDiv).addClass('loading-indicator-overlay');
    
    if ( settings.addClass ){
	jQuery(overlayDiv).addClass(settings.addClass + '-overlay');
    }
    
    //
    // Set overlay position
    //
    
    var overlay_width;
    var overlay_height;
    
    var border_top_width = jQuery(this).css('border-top-width');
    var border_left_width = jQuery(this).css('border-left-width');
    
    //
    // IE will return values like 'medium' as the default border, 
    // but we need a number
    //
    border_top_width = isNaN(parseInt(border_top_width)) ? 0 : border_top_width;
    border_left_width = isNaN(parseInt(border_left_width)) ? 0 : border_left_width;

    var overlay_left_pos = jQuery(this).offset().left + parseInt(border_left_width);// +  $(document.body).css( "border-left" );
    var overlay_top_pos = jQuery(this).offset().top + parseInt(border_top_width);
    
    if ( settings.overlayWidth !== null ) {
	overlay_width = settings.overlayWidth;
    }
    else {
	overlay_width = parseInt(jQuery(this).width()) + parseInt(jQuery(this).css('padding-right')) + parseInt(jQuery(this).css('padding-left'));
    }

    if ( settings.overlayHeight !== null ) {
	overlay_height = settings.overlayWidth;
    }
    else {
	overlay_height = parseInt(jQuery(this).height()) + parseInt(jQuery(this).css('padding-top')) + parseInt(jQuery(this).css('padding-bottom'));
    }


    jQuery(overlayDiv).css('width', overlay_width.toString() + 'px');
    jQuery(overlayDiv).css('height', overlay_height.toString() + 'px');

    jQuery(overlayDiv).css('left', overlay_left_pos.toString() + 'px');
    jQuery(overlayDiv).css('position', 'absolute');

    jQuery(overlayDiv).css('top', overlay_top_pos.toString() + 'px' );
    jQuery(overlayDiv).css('z-index', settings.overlayZIndex);

    //
    // Set any custom overlay CSS		
    //
    if ( settings.overlayCSS ) {
       	jQuery(overlayDiv).css ( settings.overlayCSS );
    }


    //
    // We have to append the element to the body first
    // or .width() won't work in Webkit-based browsers (e.g. Chrome, Safari)
    //
    jQuery(loadingDiv).css('display', 'none');
    jQuery(document.body).append(loadingDiv);
    
    jQuery(loadingDiv).css('position', 'absolute');
    jQuery(loadingDiv).css('z-index', settings.indicatorZIndex);

    //
    // Set top margin
    //

    var indicatorTop = overlay_top_pos;
    
    if ( settings.marginTop ) {
	indicatorTop += parseInt(settings.marginTop);
    }
    
    var indicatorLeft = overlay_left_pos;
    
    if ( settings.marginLeft ) {
	indicatorLeft += parseInt(settings.marginTop);
    }
    
    
    //
    // set horizontal position
    //
    if ( settings.hPos.toString().toLowerCase() == 'center' ) {
	jQuery(loadingDiv).css('left', (indicatorLeft + ((jQuery(overlayDiv).width() - parseInt(jQuery(loadingDiv).width())) / 2)).toString()  + 'px');
    }
    else if ( settings.hPos.toString().toLowerCase() == 'left' ) {
	jQuery(loadingDiv).css('left', (indicatorLeft + parseInt(jQuery(overlayDiv).css('margin-left'))).toString() + 'px');
    }
    else if ( settings.hPos.toString().toLowerCase() == 'right' ) {
	jQuery(loadingDiv).css('left', (indicatorLeft + (jQuery(overlayDiv).width() - parseInt(jQuery(loadingDiv).width()))).toString()  + 'px');
    }
    else {
	jQuery(loadingDiv).css('left', (indicatorLeft + parseInt(settings.hPos)).toString() + 'px');
    }		

    //
    // set vertical position
    //
    if ( settings.vPos.toString().toLowerCase() == 'center' ) {
	jQuery(loadingDiv).css('top', (indicatorTop + ((jQuery(overlayDiv).height() - parseInt(jQuery(loadingDiv).height())) / 2)).toString()  + 'px');
    }
    else if ( settings.vPos.toString().toLowerCase() == 'top' ) {
	jQuery(loadingDiv).css('top', indicatorTop.toString() + 'px');
    }
    else if ( settings.vPos.toString().toLowerCase() == 'bottom' ) {
	jQuery(loadingDiv).css('top', (indicatorTop + (jQuery(overlayDiv).height() - parseInt(jQuery(loadingDiv).height()))).toString()  + 'px');
    }
    else {
	jQuery(loadingDiv).css('top', (indicatorTop + parseInt(settings.vPos)).toString() + 'px' );
    }		


    
    
    //
    // Set any custom css for loading indicator
    //
    if ( settings.css ) {
       	jQuery(loadingDiv).css ( settings.css );
    }

    
    //
    // Set up callback options
    //
    var callback_options = 
	{
	    'overlay': overlayDiv,
	    'indicator': loadingDiv,
	    'element': this
	};
    
    //
    // beforeShow callback
    //
    if ( typeof(settings.beforeShow) == 'function' ) {
	settings.beforeShow( callback_options );
    }
    
    //
    // Show the overlay
    //
    jQuery(overlayDiv).show();
    
    //
    // Show the loading indicator
    //
    jQuery(loadingDiv).show();

    //
    // afterShow callback
    //
    if ( typeof(settings.afterShow) == 'function' ) {
	settings.afterShow( callback_options );
    }

    return this;
};


jQuery.fn.hideLoading = function(options) {
    
    
    var settings = {};
    
    jQuery.extend(settings, options);

    if ( settings.indicatorID ) {
	indicatorID = settings.indicatorID;
    }
    else {
	indicatorID = jQuery(this).attr('id');
    }
    
    jQuery(document.body).find('#loading-indicator-' + indicatorID ).remove();
    jQuery(document.body).find('#loading-indicator-' + indicatorID + '-overlay' ).remove();
    
    return this;
};



jQuery(document).ready(
		function() {

		  //
		  // When a user clicks the 'loading-default' link,
		  // call showLoading on the activity pane
		  // with default options
		  //
		  jQuery('a.loading-default').click(

			function() {
				jQuery('#activity_pane').showLoading();
			}

		  ); 


		  //
		  // When a user clicks the 'loading-ajax' link,
		  // call showLoading, sleep, then call hide loading
		  // with default options
		  //
		  jQuery('a.loading-ajax').click(
        
        

			function() {
        
        
				jQuery('#activity_pane').showLoading(
	 			 {
				    'afterShow': 
					function() {
						setTimeout( "jQuery('#activity_pane').hideLoading()", 1000 );
					}

				
								
				 }
				);
			}

		  ); 


		  //
		  // When a user clicks the 'loading-bars' link,
		  // call showLoading with addClass specified
		  //
		  jQuery('a.loading-bars').click(

			function() {
				jQuery('#activity_pane').showLoading(
	 			 {
				    'addClass': 'loading-indicator-bars'
								
				 }
				);
			}

		  ); 


		  //
		  // When a user clicks the 'loading-hide' link,
		  // call hideLoading on the activity pane
		  //
		  jQuery('a.loading-hide').click(

			function() {
				jQuery('#activity_pane').hideLoading();
			}

		  ); 

		}

	);
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console