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.

            
              <button id="btn1">Go</button> <button id="btn2">Reset Container</button>

<div id="imgContainer"></div>

<div id="progressBar"></div>

<canvas id="canvas" width="220" height="220"></canvas>

<div id="percentageContainer">

	<div id="percentageLoad">0 %</div>
    
</div>

<div id="spinnerContainer">
    	<div class="spinDot"></div>
        <div class="spinDot"></div>
        <div class="spinDot"></div>
        <div class="spinDot"></div>
        <div class="spinDot"></div>
        <div class="spinDot"></div>
        <div class="spinDot"></div>
        <div class="spinDot"></div>
        <div class="spinDot"></div>
</div>
            
          
!
            
              html
{
  height:100%;
}

body
{
	margin:0;
  padding:0;
  background : -webkit-linear-gradient(top, rgb(0, 0, 0) 00%, rgb(200, 200, 200) 100%);
  background : -moz-linear-gradient(top, rgb(0, 0, 0) 00%, rgb(200, 200, 200) 100%);
  background : -o-linear-gradient(top, rgb(0, 0, 0) 00%, rgb(200, 200, 200) 100%);
  background : -ms-linear-gradient(top, rgb(0, 0, 0) 00%, rgb(200, 200, 200) 100%);
  background : -linear-gradient(top, rgb(0, 0, 0) 00%, rgb(200, 200, 200) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}


/*---------------------------------------------------------------------

/* CANVAS */
#canvas
{
	position:relative;
	margin-top:100px;
	left:50%;
	margin-left:-110px;
}
/*---------------------------------------------------------------------

/* PERCENTAGE STYLE */
#percentageContainer
{
	position:relative;
	top:-150px;
	text-align:center;
}

#percentageLoad
{
	padding:5px 15px;
	border:solid 1px;
	border-radius:5px;
	background:#000;
	font:44px bold "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#fff;
	display:inline-block;
}
/*---------------------------------------------------------------------

/* SPINNER STYLE */
#spinnerContainer
{
	top:-135px;
	left:50%;
	margin-left:-107.5px;
	position:relative;
	width:215px;
	height:50px;
	text-align:center;
}

/*---------------------------------------------------------------------

/* BUTTONS STYLE */
button
{
  padding:5px 10px;
  margin:10px;
  border-radius:5px;
  background : -webkit-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(200, 200, 200) 100%);
	background : -moz-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(200, 200, 200) 100%);
	background : -o-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(200, 200, 200) 100%);
	background : -ms-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(200, 200, 200) 100%); 
	background : -linear-gradient(top, rgb(255, 255, 255) 0%, rgb(200, 200, 200) 100%);
  border:1px solid #646464;
}

button:hover
{
  background : -webkit-linear-gradient(top, rgb(200, 200, 200) 0%, rgb(255, 255, 255) 100%);
	background : -moz-linear-gradient(top, rgb(200, 200, 200) 0%, rgb(255, 255, 255) 100%);
	background : -o-linear-gradient(top, rgb(200, 200, 200) 0%, rgb(255, 255, 255) 100%);
	background : -ms-linear-gradient(top, rgb(200, 200, 200) 0%, rgb(255, 255, 255) 100%); 
	background : -linear-gradient(top, rgb(200, 200, 200) 0%, rgb(255, 255, 255) 100%);
}

button:active
{
  position:relative;
	top:1px;
}
/*---------------------------------------------------------------------

/* PROGRESS BAR STYLE */
#progressBar
{
	width:100%;
	height:5px;
	background:#fff;
	position:relative;
  margin-top:60px;
  margin-bottom:-90px;
}
            
          
!
            
              var imgContainer = $("div#imgContainer"),
	progressBar = $("div#progressBar"),
	
	btn1 = $("button#btn1"),
	btn2 = $("button#btn2"),
	
	//images variables
	imagesAmount = 6,//total images being loaded
	loadedCount = 0,//current number of images loaded
	currentImages,//images already present in the container

	//we get the full width of the progress bar it depens on display width
	progBarWidth = progressBar.outerWidth(),
	//how much progress every image means
	progressUnit = 1 / imagesAmount,
	currentProgress,//the current progress of the total images being downloaded
	percentageLoaded;//total percent of images already loaded

/*
---------------------------------------------------------------------
		ADD IMAGES CODE
---------------------------------------------------------------------
*/
function addImages()
{
	//show the percentage loaded text
	TweenMax.to([percentageContainer,percentageLoad], .5, {scale:1, opacity:1});
	
	for(var i = 0; i < imagesAmount; i++)
	{
		//this vars are for getting random images
		//for real case scenario this is not needed. different approach for that type
		var size = Math.random() * 3 + 1,
			width = Math.round( (Math.random() * 110 + 100) * size ),
			height = Math.round( 140 * size );
			imgString = '<img src="http://lorempixel.com/'+ width + '/' + height + '/" height="100" />';
		//add the image at the beggining of the container
		imgContainer.prepend(imgString);
	}
	imgContainer.imagesLoaded()//we set up the images loaded instance to work in the image container
		.progress(loadProgress);//we add the deferred call to the images loaded function
}
//------ADD IMAGES CODE END----------------------------------------//

/*
---------------------------------------------------------------------
		CANVAS CIRCLE CODE
---------------------------------------------------------------------
*/
var canvas = document.getElementById('canvas'),
	ctx = canvas.getContext('2d'),//circle context
	segmentObj = {seg:0},
	totalSegments = 150;//number of circle segments, more segments smoother animation

//canvas initial set up
ctx.strokeStyle = 'rgb(0,0,200)';
ctx.lineWidth = 5;
ctx.lineCap = 'round';

//canvas works with radians, but we're feeding degrees so they need to be converted before they're used
function getRadians(degreesValue)
{
	var radiansValue = (Math.PI / 180) * degreesValue;
	return radiansValue;
}

//function to draw the arc/circle
function manualCircle(start, end, clock)//the params are start angle, end angle and boolean for clokwise or counter clockwise
{
	ctx.clearRect(0,0,220,220);//we have to clear the canvas otherwise the line looks horrible
	ctx.beginPath();
	ctx.arc(110, 110, 100, start, end, clock);
	ctx.stroke();
}

//update arc/circle drawing
function circleUpdate()
{
	//degrees of the arc, could be less, in this case we create a full circle
	var amplitude = 360,
		step = amplitude / totalSegments,
		endAngle = (step  * (segmentObj.seg + 1));//the new angle for the next step in the arc
	
	//draw the new arc 
	manualCircle(-getRadians(0), -getRadians(endAngle), true);
}
//------CANVAS CIRCLE CODE END-------------------------------------//

/*
---------------------------------------------------------------------
		PROGRESS CODE
---------------------------------------------------------------------
*/
//this function executes everytime an image is complete
function loadProgress(imgLoad, image)
{
	//one more image has been loaded. this counts even for the images already loaded
	loadedCount++;
	//we put the image in correct position
	TweenMax.to(image.img, .5, {top:0});
	
	//since there could be other images in the container we check that
	//with this the progress bar and percentage loaded are updated by the 
	//number of images being loaded and not the total in the container
	if( (loadedCount - currentImages.length) > 0 )
	{
		currentProgress = progressUnit * (loadedCount - currentImages.length);
		TweenLite.to(progressTl, .7, {progress:currentProgress, ease:Linear.easeNone});
	}
}

//progress animation instance. the instance's time is irrelevant, can be anything but 0 to void  immediate render
var progressTl = new TimelineMax({paused:true,onUpdate:progressUpdate,onComplete:loadComplete})

progressTl
	//tween the progress bar width
	.to(progressBar, 1, {width:progBarWidth,ease:Linear.easeNone})
	//tween the amount of circle segments to set the cricle new angle
	.to(segmentObj, 1, {seg:totalSegments,ease:Linear.easeNone,roundProps:'seg',},0);

//as the progress bar witdh updates and grows we put the precentage loaded in the screen
function progressUpdate()
{
	//the percentage loaded based on the tween's progress
	percentageLoaded = Math.round(progressTl.progress() * 100);
	//we put the percentage in the screen
	$("#percentageLoad").html(percentageLoaded + ' %');
	
	circleUpdate();
}

//this function resets progress bar width, set progress and percentage loaded to 0
function resetProgress()
{
	//set the progress bar to width 0, no progress
	TweenLite.set(progressBar, {width:0});
	progressTl.progress(0);
	percentageLoaded = 0;
	loadedCount = 0;
}
//------PROGRESS CODE END------------------------------------------//

/*
---------------------------------------------------------------------
		BUTTONS EVENTS
---------------------------------------------------------------------
*/
btn1.click(function()
{
	resetProgress();//reset the progress
	currentImages = imgContainer.find("img");//how many images there are
	addImages();//run the function to add the images
	setupSipnner();//play the spinner line
});

btn2.click(function()
{
	resetProgress();//reset the progress
	imgContainer.empty();//remove the images from the container
});
//------BUTTONS EVENTS END-----------------------------------------//

/*
---------------------------------------------------------------------
		SPINNER CODE
---------------------------------------------------------------------
*/
//spinner variables
var spinContainer = $("div#spinnerContainer"),
	spinElements = $("div.spinDot"),
	spinAngleSet = 360 / spinElements.length,
	spinSpeed = 0.055,//smaller the number faster the spin
	spinLine = new TimelineMax({paused:true, repeat:-1, delay:.55}); 

TweenMax.set(spinContainer, {perspective:300});

function setupSipnner()
{
	TweenMax.set(spinElements, {opacity:1});
	$.each(spinElements, function(index, element)
	{
		var alpha = (0.1 * index) + .3;
			 
		TweenMax.to(element, .5,{rotationY:(( index + 1 ) * spinAngleSet), transformOrigin:'50% 50% -100px', autoAlpha:alpha});
			 
		spinLine.set(spinElements, {rotationY:('+=' + spinAngleSet), transformOrigin:'50% 50% -100px', ease:Linear.easeNone, delay:spinSpeed})
	});
	
	spinLine.play();//play the spinner line
}
//------SPINNER CODE END-------------------------------------------//

/*
---------------------------------------------------------------------
		LOAD COMPLETE CODE
---------------------------------------------------------------------
*/
//load completes
function loadComplete()
{
	spinLine.pause();
	TweenMax.to(spinElements, .5, {rotationY:0});
	TweenMax.to(spinElements, .25, {opacity:0, delay:.5});
	spinLine.seek(0);
	
	TweenMax.to([percentageContainer,percentageLoad], .5, {scale:0, opacity:0, delay:.5});
}
//------LOAD COMPLETE CODE END-------------------------------------//
            
          
!
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