Radial progress bar

by Ayyappan Sakthivadivel

HTML

<div id="container">
  <svg id="svg" width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle r="100" cx="100" cy="100" fill="transparent"></circle>
    <circle id="bar" r="100" cx="100" cy="100" fill="transparent"></circle>
  </svg>
  <div id="progress-text">
  78%
  </div>
</div>

CSS

#container {
  position: relative;
}
#svg {
  transform: rotate(-90deg);
}
#svg circle {
  stroke-dashoffset: 0;
  stroke: #FFF;
  stroke-width: 6px;
}
#progress-text {
  position: absolute;
  width: 96px;
  height: 96px;
  text-align: center;
  font-size: 25px;
  line-height: 96px;
  top: 0px;
}

#svg #bar {
  stroke: #FF9F1E;
  stroke-dasharray: 205.834 263.89;
}