Loading Forked from Julien Martins Da Costa's Pen Circle Loading Animation.
A Pen by seaofclouds on CodePen.
Loading Forked from Julien Martins Da Costa's Pen Circle Loading Animation.
A Pen by seaofclouds on CodePen.
<svg class="backend loading" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> | |
<circle class="internal" cx="60" cy="60" r="45"></circle> | |
<circle class="external" cx="60" cy="60" r="59"></circle> | |
</svg> | |
<svg class="backend connect" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> | |
<circle class="a" cx="74" cy="74" r="45"></circle> | |
<circle class="b" cx="46" cy="46" r="45"></circle> | |
</svg> | |
<svg class="backend error" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> | |
<circle class="external" cx="60" cy="60" r="58"></circle> | |
<line x1="18.5" x2="101" y1="18" y2="102" /> | |
</svg> |
.backend { | |
width: 120px; | |
height: 120px; | |
stroke-width: 2; | |
stroke: black; | |
fill: none; | |
} | |
.connect { | |
stroke: #eee; | |
cursor: pointer; | |
transition: all 2s ease-in-out; | |
} | |
.connect:hover { | |
stroke:#ff6699; | |
transform: rotate(540deg); | |
// animation: rotate 2s linear infinite; | |
} | |
.error { | |
stroke: #ff4433; | |
animation: error 2s linear infinite; | |
circle { | |
stroke-dashoffset: 30; | |
stroke-dasharray: 150, 30; | |
} | |
} | |
.loading { | |
circle { | |
stroke: #eee; | |
stroke-dashoffset: 30; | |
transform-origin: center; | |
} | |
.internal { | |
stroke-dasharray: 187; | |
animation: internal 2s linear infinite; | |
} | |
.external { | |
stroke-dasharray: 312; | |
animation: external 3s linear infinite; | |
} | |
} | |
@keyframes rotate { | |
100% { | |
transform: rotate(360deg); | |
} | |
} | |
@keyframes internal { | |
0% { | |
} | |
100% { | |
transform: rotate(-360deg); | |
} | |
} | |
@keyframes external { | |
0% { | |
} | |
100% { | |
transform: rotate(360deg); | |
} | |
} | |
@keyframes error { | |
0% { | |
stroke: black; | |
} | |
30% { | |
stroke: HSL(5, 100%, 60%); | |
} | |
70% { | |
stroke: HSL(5, 100%, 60%); | |
} | |
100% { | |
stroke: black; | |
} | |
} | |
/* == for codepen display only ==*/ | |
body { | |
padding: 10px; | |
} | |
svg { | |
margin: 10px; | |
} |