Skip to content

Instantly share code, notes, and snippets.

@yoksel

yoksel/Thinking-about-SVG-preloaders.markdown

Last active August 29, 2015 14:02
Show Gist options
  • Save yoksel/aff4457e70a71099d0ba to your computer and use it in GitHub Desktop.
Save yoksel/aff4457e70a71099d0ba to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by yoksel.
Raw
index.html
<div class="l-wrapper">
<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="circle" class="g-circles g-circles--v1">
<circle id="12" transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) " cx="35" cy="16.6987298" r="10"></circle>
<circle id="11" transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) " cx="16.6987298" cy="35" r="10"></circle>
<circle id="10" transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60" r="10"></circle>
<circle id="9" transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) " cx="16.6987298" cy="85" r="10"></circle>
<circle id="8" transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) " cx="35" cy="103.30127" r="10"></circle>
<circle id="7" cx="60" cy="110" r="10"></circle>
<circle id="6" transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) " cx="85" cy="103.30127" r="10"></circle>
<circle id="5" transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) " cx="103.30127" cy="85" r="10"></circle>
<circle id="4" transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60" r="10"></circle>
<circle id="3" transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) " cx="103.30127" cy="35" r="10"></circle>
<circle id="2" transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) " cx="85" cy="16.6987298" r="10"></circle>
<circle id="1" cx="60" cy="10" r="10"></circle>
</g>
</svg>
<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="circle" class="g-circles g-circles--v2">
<circle id="12" transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) " cx="35" cy="16.6987298" r="10"></circle>
<circle id="11" transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) " cx="16.6987298" cy="35" r="10"></circle>
<circle id="10" transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60" r="10"></circle>
<circle id="9" transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) " cx="16.6987298" cy="85" r="10"></circle>
<circle id="8" transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) " cx="35" cy="103.30127" r="10"></circle>
<circle id="7" cx="60" cy="110" r="10"></circle>
<circle id="6" transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) " cx="85" cy="103.30127" r="10"></circle>
<circle id="5" transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) " cx="103.30127" cy="85" r="10"></circle>
<circle id="4" transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60" r="10"></circle>
<circle id="3" transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) " cx="103.30127" cy="35" r="10"></circle>
<circle id="2" transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) " cx="85" cy="16.6987298" r="10"></circle>
<circle id="1" cx="60" cy="10" r="10"></circle>
</g>
</svg>
<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="circle" class="g-circles g-circles--v3">
<circle id="12" transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) " cx="35" cy="16.6987298" r="10"></circle>
<circle id="11" transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) " cx="16.6987298" cy="35" r="10"></circle>
<circle id="10" transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60" r="10"></circle>
<circle id="9" transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) " cx="16.6987298" cy="85" r="10"></circle>
<circle id="8" transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) " cx="35" cy="103.30127" r="10"></circle>
<circle id="7" cx="60" cy="110" r="10"></circle>
<circle id="6" transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) " cx="85" cy="103.30127" r="10"></circle>
<circle id="5" transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) " cx="103.30127" cy="85" r="10"></circle>
<circle id="4" transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60" r="10"></circle>
<circle id="3" transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) " cx="103.30127" cy="35" r="10"></circle>
<circle id="2" transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) " cx="85" cy="16.6987298" r="10"></circle>
<circle id="1" cx="60" cy="10" r="10"></circle>
</g>
</svg>
<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="circle" class="g-circles g-circles--v4">
<circle id="12" transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) " cx="35" cy="16.6987298" r="10"></circle>
<circle id="11" transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) " cx="16.6987298" cy="35" r="10"></circle>
<circle id="10" transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60" r="10"></circle>
<circle id="9" transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) " cx="16.6987298" cy="85" r="10"></circle>
<circle id="8" transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) " cx="35" cy="103.30127" r="10"></circle>
<circle id="7" cx="60" cy="110" r="10"></circle>
<circle id="6" transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) " cx="85" cy="103.30127" r="10"></circle>
<circle id="5" transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) " cx="103.30127" cy="85" r="10"></circle>
<circle id="4" transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60" r="10"></circle>
<circle id="3" transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) " cx="103.30127" cy="35" r="10"></circle>
<circle id="2" transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) " cx="85" cy="16.6987298" r="10"></circle>
<circle id="1" cx="60" cy="10" r="10"></circle>
</g>
</svg>
</div>
Raw
style.scss
$max: 12;
$size: 120px;
$fill: dodgerblue;
BODY {
background:
linear-gradient(45deg,
rgba(255,255,255,0) 48%,
rgba(255,255,255,.05) 50%,
rgba(255,255,255,0) 52%),
linear-gradient(-45deg,
rgba(255,255,255,0) 48%,
rgba(255,255,255,.05) 50%,
rgba(255,255,255,0) 52%);
background-size: 1em 1em;
background-color: #000;
}
.l-wrapper {
position: absolute;
width: $size*4;
height: $size*2.5;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
text-align: center;
}
svg {
height: $size;
width: $size;
margin: 0 2em 2em;
overflow: visible;
/* border: 1px solid red; */
}
.g-circles {
transform: scale(.9) translate(7px, 7px);
}
circle {
fill: $fill;
fill-opacity: 0;
animation: opacity 1.2s linear infinite;
@for $item from 1 through $max {
&:nth-child(#{$max}n + #{$item}){
animation-delay: -#{$item/10}s;
}
}
}
.g-circles--v1 circle {
fill-opacity: 0;
animation-name: opacity;
}
.g-circles--v2 circle {
fill-opacity: 0;
stroke-opacity: 0;
stroke-width: 1;
stroke: yellowgreen;
animation-name: opacity-stroke, colors, colors-stroke, transform-2;
}
.g-circles--v3 circle {
fill-opacity: 1;
animation-name: opacity, colors;
}
.g-circles--v4 circle {
fill-opacity: 1;
fill: orange;
transform-origin: 60px 60px;
animation-name: opacity, colors-3, transform;
}
@keyframes opacity {
3% {
fill-opacity: 1;
}
75% {
fill-opacity: 0;
}
}
@keyframes opacity-stroke {
10% {
stroke-opacity: 1;
}
85% {
stroke-opacity: 0;
}
}
@keyframes colors {
0% {
fill: yellowgreen;
}
10% {
fill: gold;
}
75% {
fill: crimson;
}
}
@keyframes colors-stroke {
0% {
stroke: yellowgreen;
}
10% {
stroke: gold;
}
75% {
stroke: crimson;
}
}
@keyframes colors-2 {
0% {
fill: yellow;
}
50% {
fill: red;
}
65% {
fill: orangered;
}
95% {
fill: gold;
}
}
@keyframes colors-3 {
0% {
fill: yellowgreen;
}
50% {
fill: turquoise;
}
65% {
fill: yellow;
}
95% {
fill: orange;
}
}
@keyframes transform {
10% {
transform: scale(.75);
}
}
@keyframes transform-2 {
40% {
transform: scale(.85);
}
60% {
stroke-width: 20;
}
}
Raw
Thinking-about-SVG-preloaders.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment