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="loader-wrap">
	<div class="loader loader--green"></div>
	<div class="loader loader--blue"></div>
	<div class="loader loader--yellow"></div>
	<div class="loader loader--red"></div>
</div>

<a href="https://ice-creme.de" class="ws" target="_blank">ice-creme.de</a>

<div class="logo">
	<svg id="ice-logo" fill="none" viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg">
		<path fill="none" d="M0 0h100v50H0z"/><!-- container -->
		<path d="M33.7613 25.8127H5.21007C2.33411 25.8127 0 23.4793 0 20.6043s2.33411-5.2083 5.21007-5.2083H33.7613v10.4167z" fill="#C89E6B"/><!-- handle -->
		<path opacity=".6" d="M33.7279 15.396h-2.1423c-.0167 1.5-.0251 3.225-.0251 5.2083 0 1.9834.0084 3.7084.0251 5.2084h2.1423V15.396z" fill="#A37B4B"/><!-- shadow -->

		<path d="M20.3358 19.9622c4.0138-.3125 8.1652-.6333 11.4997-1.05.7044-.0875 1.3463-.175 1.9298-.2667v-.5083c-.596.0917-1.2588.1833-1.9923.275-3.322.4125-7.465.7333-11.4747 1.0458-3.6846.2875-7.1607.5584-9.6491.8709-4.09715.525-7.31489 1.5916-9.29472 2.4-.26259.1083-.51267.2125-.746082.3166.079194.15.166723.2959.25842.4375 2.134042-.9333 5.510172-2.1041 9.840782-2.65 2.4758-.3166 5.9478-.5875 9.6282-.8708z" fill="#A37B4B"/><!-- handle line -->
		<path d="M7.74857 23.9165c.35846.0541.77526.0791 1.22125.0791.4043 0 .83777-.0208 1.27958-.0625 1.363-.1333 3.6471-.5833 3.5637-1.4416-.0333-.3667-.4502-.6-1.2713-.7209-.6794-.1-1.5671-.1041-2.5008-.0125-1.36295.1334-3.64704.5834-3.56368 1.4417.03334.3625.45015.6 1.27125.7167zm.10421-1.2334c.6002-.2 1.39629-.35 2.23412-.4333.8419-.0792 1.6505-.0833 2.2757-.0042.6669.0834.9045.2334.9462.2875-.0334.0625-.2376.2542-.8753.4625-.6002.1959-1.3963.35-2.2341.4334-.84196.0791-1.65056.0833-2.27577.0041-.66689-.0833-.90447-.2333-.94615-.2875.03335-.0625.23758-.25.8753-.4625z" fill="#A37B4B"/><!-- handle line ring -->
		<path d="M4.34313 25.3371c2.63004.2833 8.34447.4625 11.12867-.9.1126-.0542.2251-.1084.3376-.1667 2.6759-1.3208 5.9895-2.9542 17.956-3.4125v-.5c-12.0873.4625-15.4551 2.1208-18.1769 3.4625-.1125.0542-.225.1125-.3376.1667-1.1795.575-3.1093.9291-5.581 1.0208-2.02984.075-4.05552-.0375-5.27259-.1708-.67939-.075-1.37963-.0084-2.03818.1208.22508.15.46682.2792.71691.3917.42097-.0459.85028-.0584 1.26709-.0125zM33.6195 24.4536l.1-.4917c-1.2295-.2458-3.3469-.5208-5.5977-.5416-1.8214-.0209-4.3389.1291-5.9978.9416-1.0504.5167-2.5217 1.0167-3.968 1.4459h1.6672c.9295-.3125 1.8131-.65 2.5175-1 2.8677-1.4 8.8363-.8417 11.2788-.3542zM8.14021 17.958c2.46329-.25 5.52269-.3209 8.76129-.3917 5.9103-.1333 12.5583-.2833 16.8598-1.6375v-.525c-4.2181 1.3792-10.9204 1.5292-16.8723 1.6625-3.2511.075-6.3188.1417-8.7988.3958-3.85545.3917-6.47299 1.6167-7.9943347 2.5792-.0250084.0167-.0458486.0292-.070857.0458C.00833611 20.258 0 20.433 0 20.608v.0958c.125042-.0833.250083-.1667.387629-.2542C1.85895 19.5205 4.3973 18.3413 8.14021 17.958zM11.6413 15.3955H8.68615c-2.83011.5208-5.03085 1.0375-6.64805 1.4667-.21257.0583-.42098.1125-.61688.1666-.19589.2084-.37512.4334-.537675.6709.404305-.1167.837775-.2375 1.312935-.3625 2.11321-.5625 5.22674-1.2667 9.44482-1.9417z" fill="#A37B4B"/><!-- handle lines -->
		<!-- ICE MAIN -->
		<path id="ice-red" d="M34.1488 4.16667c-.4085 1.5125-.8378 2.98333-.8378 16.43753 0 13.4541.4293 14.925.8378 16.4375.3793 1.4083 1.2754 3.8 3.6137 4.1291.8003.1334 1.5464.4334 1.5464 1.2042 0 1.1042.8586 2.0083 1.9464 2.0792-1.0711-6.7334 3.2511-19.55-.025-44.4542h-2.9134c-2.7593 0-3.7596 2.65417-4.1681 4.16667z" fill="#DB5746"/><!-- red -->
		<path id="ice-green" d="M100 20.6042c0 6.6958-3.1927 12.6458-8.1443 16.4083-1.6381 1.3583-2.9802 5.6458-6.0896 5.0833-1.042-.1875-2.5967-.9416-3.2719-.6625-.6044.2459-3.5345 1.5917-3.5345 5.4834 0 1.525-1.1087 2.7916-2.5634 3.0375C74.3665 41.7167 80.0976 24.775 77.4383 0h1.9507C90.772 0 100 9.225 100 20.6042z" fill="#79C3A6"/><!-- green -->
		<path id="ice-blue" d="M76.4006 49.9542c-.1709.0291-.3418.0458-.521.0458-1.7047 0-3.0844-1.3792-3.0844-3.0833 0-5.8667-2.9176-5.6042-5.085-5.7084H55.9021C58.1278 20.9125 57.9361 18.6458 55.3269 0h22.1157c2.6592 24.7792-3.0719 41.7208-1.042 49.9542z" fill="#3D96D3"/><!-- blue -->
		<path id="ice-yellow" d="M55.8978 41.2083H44.915c-.7795.0167-1.438.3959-1.438 1.1667 0 1.15-.9337 2.0833-2.084 2.0833-.0459 0-.0917 0-.1376-.0041C40.1842 37.7208 44.5065 24.9 41.2304 0h14.0922c2.6092 18.6458 2.8009 20.9125.5752 41.2083z" fill="#F3EB75"/><!-- yellow -->
	</svg>
</div>

<a class="rerun">rerun</a>
            
          
!
            
              $main: #EF3340;
$g: #79C3A6;
$b: #3D96D3;
$y: #F3EB75;
$r: #DB5746;

* {
	margin: 0;
	padding: 0;
	box-sizing:border-box;
}

html, body {
	width: 100%;
	height: 100%;
}

body  {
	display: flex;
	justify-content: center;
	align-items: center;
}

.loader-wrap {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	
	.loader {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 0;
		
		&--green {
			background: $g;
		}
		
		&--blue {
			background: $b;
		}
		
		&--yellow {
			background: $y;
		}
		
		&--red {
			background: $r;
		}
	}
}

a {
	position: fixed;
	display: block;
	color: #000;
	text-decoration: none;
	padding: 10px 20px;
	background: rgba(50,50,50,1);
	color: #fff;
	top: 10px;
	cursor: pointer;
}

.ws {
	left: 10px;
}

.rerun {
	right: 10px;
}

.logo {
	position: relative;
	z-index: 10;
	
	svg {
		position: relative;
		width: 400px;
		height: 200px;
	}
}

#ice-logo {
	opacity: 0;
	transform: rotate(0);
}

#ice-green,
#ice-blue,
#ice-yellow,
#ice-red {
	opacity: 0;
}

h1 {
	position: absolute;
	transform: translateY(100px);
	opacity: 0;
}
            
          
!
            
              $(document).ready(function() {
	loadAnim();
});

$('.rerun').on('click', function() {
	loadAnim();
});

var ready = true;

function loadAnim() {
	if(ready) {
		var wrap = $('.loader-wrap'),
				g = $('.loader--green'),
				b = $('.loader--blue'),
				y = $('.loader--yellow'),
				r = $('.loader--red'),
				svg = $('#ice-logo'),
				svgg = $('#ice-green'),
				svgb = $('#ice-blue'),
				svgy = $('#ice-yellow'),
				svgr = $('#ice-red'),
				tl = new TimelineMax({onComplete:setReady});
		
		svg.css({opacity: 0});
		svgg.css({opacity: 0});
		svgb.css({opacity: 0});
		svgy.css({opacity: 0});
		svgr.css({opacity: 0});
		
														
		ready = false;

		tl.to(g, .5, {
			height: '100%',
			ease: Power4.easeOut,
			delay: 1
		});

		tl.to(b, .5, {
			height: '100%',
			ease: Power4.easeOut
		}, '-=.3');

		tl.to(y, .5, {
			height: '100%',
			ease: Power4.easeOut
		}, '-=.3');

		tl.to(r, .5, {
			height: '100%',
			ease: Power4.easeOut
		}, '-=.3');


		// reset
		/* ----------- */
		tl.to(g, .1, {
			top: 0,
			bottom: 'auto'
		}, '-=.1');
		tl.to(b, .1, {
			top: 0,
			bottom: 'auto'
		}, '-=.1');
		tl.to(y, .1, {
			top: 0,
			bottom: 'auto'
		}, '-=.1');
		tl.to(r, .1, {
			top: 0,
			bottom: 'auto'
		}, '-=.1');
		/* ----------- */

		tl.from(svg, .5, {
			transform: 'rotate(-45deg)',
			y: '100%'
		});
		tl.to(svg, .5, {
			opacity: 1
		}, '-=.5');

		tl.to(svgr, .1, {
			opacity: 1
		});

		tl.to(r, .5, {
			height: 0,
			ease: Power4.easeOut
		});

		tl.to(svgy, .1, {
			opacity: 1
		}, '-=.4');

		tl.to(y, .5, {
			height: 0,
			ease: Power4.easeOut
		}, '-=.2');

		tl.to(svgb, .1, {
			opacity: 1
		}, '-=.4');

		tl.to(b, .5, {
			height: 0,
			ease: Power4.easeOut
		}, '-=.2');

		tl.to(svgg, .1, {
			opacity: 1
		}, '-=.4');

		tl.to(g, .5, {
			height: 0,
			ease: Power4.easeOut
		}, '-=.2');

		// reset
		/* ----------- */
		tl.to(r, .1, {
			top: 'auto',
			bottom: 0
		}, '-=.1');
		tl.to(y, .1, {
			top: 'auto',
			bottom: 0
		}, '-=.1');
		tl.to(b, .1, {
			top: 'auto',
			bottom: 0
		}, '-=.1');
		tl.to(g, .1, {
			top: 'auto',
			bottom: 0
		}, '-=.1');
		/* ----------- */
	}
	
}

function setReady() {
	ready = true;
}
            
          
!
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