Created for this blog post: Isometric loading indicator with CSS http://blog.learningspaces.io/animated-loading-indicator-with-isometric-cubes/
LearningSpaces: http://learningspaces.io
A Pen by Matthijs Kuiper on CodePen.
<section> | |
<h5>HTML</h5> | |
<div class="logo animate"> | |
<div class="cube"> | |
<span></span> | |
<span></span> | |
<span></span> | |
</div> | |
<div class="cube"> | |
<span></span> | |
<span></span> | |
<span></span> | |
</div> | |
</div> | |
</section> | |
<section> | |
<h5>SVG</h5> | |
<svg xmlns="http://www.w3.org/2000/svg" width="180" height="206.097" viewBox="0 0 180 206.097"> | |
<path fill="#CCCCCC" d="M89.997,154.906l-44.905-25.927l-0.004,0.002V77.122L2.126,52.319l0.007,101.459l87.873,50.734V154.9 | |
L89.997,154.906z M89.997,51.192v51.855l0.01,0.006l44.905,25.924l-0.003-51.849v-0.006L89.997,51.192z"/> | |
<path fill="#E0E0E0" d="M134.909,77.127l0.003,51.849h-0.003L90.006,154.9v49.612l87.868-50.734V52.319L134.909,77.127z | |
M89.997,103.047V51.192L45.09,77.12l-0.002,0.001v51.855L89.997,103.047z"/> | |
<path fill="#F5F5F5" d="M134.909,77.122v0.006l42.965-24.808l-0.008-0.004l-87.86-50.73L2.133,52.319L45.09,77.12l44.907-25.929 | |
L134.909,77.122z M45.088,128.976l0.004,0.002l44.905,25.927l0.009-0.006l44.902-25.924l-44.901-25.924l-0.01-0.006L45.088,128.976z"/> | |
</svg> | |
</section> |
Created for this blog post: Isometric loading indicator with CSS http://blog.learningspaces.io/animated-loading-indicator-with-isometric-cubes/
LearningSpaces: http://learningspaces.io
A Pen by Matthijs Kuiper on CodePen.
@import "bourbon"; | |
$cube-color: #ccc; | |
$cube-size: 100px; | |
$animation-duration: 1.2s; | |
// keyframes | |
@include keyframes(color-shift) { | |
0%, 100% { | |
background: $cube-color; // for html | |
fill: $cube-color; // for svg | |
} | |
33% { | |
background: lighten($cube-color, 8%); | |
fill: lighten($cube-color, 8%); | |
} | |
66% { | |
background: lighten($cube-color, 16%); | |
fill: lighten($cube-color, 16%); | |
} | |
} | |
// apply animation | |
.logo.animate span, | |
svg path { | |
@include animation(color-shift $animation-duration infinite); | |
&:nth-child(2) { @include animation-delay(-$animation-duration / 3 * 2); } | |
&:nth-child(3) { @include animation-delay(-$animation-duration / 3); } | |
} | |
// logo container | |
.logo { | |
position: relative; | |
height: $cube-size * 2; | |
width: $cube-size * 1.8; | |
// cube container | |
.cube { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
// inner cube | |
&:nth-child(2) { | |
@include transform(rotate(180deg) scale(.5)); | |
} | |
// cube faces | |
span { | |
@include transform-origin(0 0); | |
position: absolute; | |
height: $cube-size; | |
width: $cube-size; | |
// top | |
&:nth-child(1) { | |
@include transform(rotate(210deg) skewX(-30deg) scaleY(0.864)); | |
background: lighten($cube-color, 16%); | |
} | |
// left | |
&:nth-child(2) { | |
@include transform(rotate(90deg) skewX(-30deg) scaleY(0.864)); | |
background: $cube-color; | |
} | |
// right | |
&:nth-child(3) { | |
@include transform(rotate(-30deg) skewX(-30deg) scaleY(0.864)); | |
background: lighten($cube-color, 8%); | |
} | |
} | |
} | |
} | |
// demo styling | |
body { | |
text-align: center; | |
font-family: sans-serif; | |
color: #aaa; | |
section { | |
display: inline-block; | |
margin: 10px 20px; | |
vertical-align: top; | |
} | |
} |