WordPress Hosting
Free Photos
WordPress Themes

CSS Loading Animation

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"> <symbol id="s--circle"> <circle r="10" cx="20" cy="20"></circle> </symbol> <g class="g-circles g-circles--v1"> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> </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 class="g-circles g-circles--v2"> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> </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 class="g-circles g-circles--v3"> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--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 class="g-circles g-circles--v4"> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> <g class="g--circle"> <use xlink:href="#s--circle" class="u--circle"/> </g> </g> </svg> </div>
SCSS
$max: 12; $angle: 360/$max; $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: #253237; } .l-wrapper { position: absolute; width: $size*4; height: $size*2.3; 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); } @function transform($item: 1){ $base: rotate(#{-$angle*$item}deg) translate(5px, 5px); @return $base; } .g--circle { transform-origin: $size/2 $size/2; fill: $fill; animation: opacity 1.2s linear infinite; @for $item from 1 through $max { &:nth-child(#{$max}n + #{$item}){ animation-delay: -#{$item/10}s; transform: transform($item) scale(.9); } } } .g-circles--v1 .g--circle { fill-opacity: 0; animation-name: opacity; } .g-circles--v2 .g--circle { fill-opacity: 0; stroke-opacity: 0; stroke-width: 1; stroke: yellowgreen; animation-name: opacity-stroke, colors, colors-stroke; .u--circle { //transform: scale(.6) translate(10px,10px); //transform-origin: 10px 10px; animation: transform-2 1.2s linear infinite; } } .g-circles--v2 .g--circle { @for $item from 1 through $max { &:nth-child(#{$max}n + #{$item}) .u--circle{ animation-delay: -#{$item/10}s; } } } .g-circles--v3 .g--circle { fill-opacity: 1; animation-name: opacity, colors; } .g-circles--v4 { .g--circle { fill-opacity: 1; fill: orange; animation-name: opacity, colors-3; } .u--circle { animation: transform 1.2s linear infinite; } } .g-circles--v4 .g--circle { @for $item from 1 through $max { &:nth-child(#{$max}n + #{$item}) .u--circle{ animation-delay: -#{$item/10}s; } } } @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-origin: 70px 70px; transform: scale(.75); } } @keyframes transform-2 { 40% { transform: scale(.85) translate(10px,10px); } 60% { stroke-width: 20; } }
JAVASCRIPT
Expand for more options Login