backend iconography animated

backend iconography animated.markdown

backend iconography animated

Loading Forked from Julien Martins Da Costa's Pen Circle Loading Animation.

A Pen by seaofclouds on CodePen.

License.

index.html

<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>

style.css

.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;
}