Graph Loader Animation

graph-loader-animation.markdown

Graph Loader Animation

Graph Loading Animation

A Pen by Rahul Sagore on CodePen.

License.

index.html

<div class='dis-ib'>
  <h3 class="text-center">Progress bar</h3>
  <div class="graph-loader-wrapper">
    <div class="loader-anime hack-2 m-center graph__animate">  </div>
      <svg height="155" width="155">
        <circle class="circle-back" cx="76" cy="77" r="75" stroke="#F0F0F0" stroke-width="2" fill="transparent" />
        <circle class="circle-front loader__progress" cx="76" cy="77" r="75" stroke="transparent" stroke-width="2" fill="transparent" />
      </svg>
  </div>
</div>

<div class='dis-ib'>
  <h3 class="text-center">Indefinite loader</h3>
  <div class="graph-loader-wrapper">
    <div class="loader-anime2 m-center graph__animate"></div>
    <svg class="spinner" height="155" width="155">
      <circle class="loader__rotate" cx="76" cy="77" r="75" stroke="transparent" stroke-width="2" fill="transparent" />
    </svg>
  </div>
</div>

style.scss

.m-center {
  margin: 0 auto;
}

.text-center, body { 
  text-align: center;
}

.dis-ib {
  display: inline-block;
  margin-right: 150px;
}

h3 {
  margin-bottom: 40px;
}

.loader-anime {
  &.hack-2 {
   position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    margin-top: 80px;
    background-image: url('https://rahul-sagore.github.io/assets/img/loader.svg');
    background-repeat-y: no-repeat;
    background-position: 0 0;
    border: none;
    border-radius: initial;
    overflow: visible;
  }
  
  svg {
    position: relative;
    margin-left: -36px;
    margin-top: -32px;
  }
}

.graph__animate {
  animation: flowBackground 25s linear infinite;
}

.loader__progress {
  stroke-dasharray: 472;
  stroke: #0FC8B7;
  stroke-dashoffset: 0;
  animation: progressBar 10s linear infinite;
  transform-origin: 76px 77px;
  transform: rotate(-90deg);
}

.graph-loader-wrapper {
  display: inline-block;
  position: relative;
  width: 152px;
}

.loader-anime2 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  background-image: url('https://rahul-sagore.github.io/assets/img/loader.svg');
  background-repeat-y: no-repeat;
  background-position: 0 0;
  border: none;
  border-radius: initial;
  overflow: visible;
  transform: translate(-50%, -50%);
}

.loader__rotate {
    stroke: #0FC8B7;
    stroke-dasharray: 118;
    animation: rotate 10s linear infinite;
    transform-origin: 76px 77px;
    transform: rotate(-90deg);
}

@keyframes progressBar {
  0% {
    stroke-dashoffset: 472;
  }
  10% {
    stroke-dashoffset: 457;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes flowBackground {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1017px 0px;
  }
}

@keyframes rotate {
    0% {
        stroke-dashoffset: 1;
    }
    100% {
        stroke-dashoffset: 2600;
    }
}