SVG Circular Loader

by Dhruvang Gajjar

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-circle-slider.browser.js"></script>
<div id="app" class="circle">
  <circle-slider
    v-model="val6"
    side="125"
    circle-color="#ccc"
    progress-color="url(#gradient)"
    knob-color="#2f74c3"
    knob-radius-rel="10"
    progress-width="4"
  ></circle-slider>
</div>



<svg width="100%" height="100" xmlns="http://www.w3.org/2000/svg">
 <defs>
  <linearGradient id="gradient" y1="0" y2="1">
   <stop stop-color="#2e72be" offset="0"/>
   <stop stop-color="#0dbdd2" offset="1"/>
  </linearGradient>
 </defs>
 </svg>

CSS

.circle{
  transform:rotate(180deg);
  width:200px;
  pointer-events: none;
}


.circle svg path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  animation: dash 5s linear; 
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

JavaScript

var app = new Vue({
  el: '#app',
  components: {
    circleslider: VueCircleSlider.VueCircleSlider
  },
  data: {
   val6: 82
  }
})

$(".circle svg circle").last().hide();

setTimeout(function(){
	
	$(".circle svg circle").last().fadeIn();
}, 1000);