<div class="loader">
<div class="rollout">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/blue-yarnball.svg" class="yarn" />
</div>
<p class="loading-text">Loading</p>
<a href="http://www.patreon.com/infinitecanvas?ty=c" target="_blank">The Infinite Canvas</a> + <a href="http://rachelnabors.com" target="_blank">Rachel Nabors</a>
</div>
<!--
The secret is to have the yarn string set as a background here on .rollout,
but set .rollout's width to 0;
.yarn is positioned absolutely to .rollout, aligned right;
If we animate .yarn's width to grow wider to the right,
.yarn will follow;
Set a rotation transform on .yarn, and it will look
like it's rolling out!
-->@import "compass/css3";
.rollout {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/blue-strand.svg) no-repeat 0 120%;
@include background-size(400px 24px);
height: 40px;
position: absolute; left: 50%; margin-left: -200px;
@include animation(unrolling-strand 6s cubic-bezier(.57,.27,.46,.79) infinite forwards);
width: 0;
}
@include keyframes(unrolling-strand) {
60% {
opacity: 1;
width: 400px;
}
70% {
opacity: 0;
width: 400px;
}
100% {
opacity: 0;
width: 400px;
}
}
.loading-text {
@include animation(loading-fadein 6s cubic-bezier(.57,.27,.46,.79) infinite forwards);
opacity: 0;
text-align: center;
}
@include keyframes(loading-fadein) {
65% { opacity: 0; }
82.5% { opacity: 1; }
100% { opacity: 0; }
}
.yarn {
@include animation(rolling-yarn 6s cubic-bezier(.57,.27,.46,.79) infinite forwards);
position: absolute;
right: -20px; top: 0;
width: 40px;
}
@include keyframes(rolling-yarn) {
60% { @include rotate(1146deg); }
100% { @include rotate(1146deg); }
}
@import url(https://fonts.googleapis.com/css?family=Crafty+Girls);
body {
background: #c4c5cb;
color: #747078;
font-family: Crafty Girls, cursive;
font-size: 14px;
text-align: center;
}
a {font-family: sans-serif; }
a:link { color: #753493; }
a:visited { color: #56257f; }
a:hover, a:active, a:focus { color: #2d0d3c; }
.loader {
position: relative;
width: 100%; top: 100px;
}
p {
font-size: 30px;
margin-bottom: 1em;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.