Circular Progress Display is pretty good style to show the progress for Image Uploading and for Voting System.  Majority of browsers support SVG so it will be good to use SVG as progress Indicator. In this article you can find the SVG and JavaScript code to build Circular Progress.

SVG

<svg class="progress-radial" width="300px" height="300px" viewBox="0 0 300 300" shape-rendering="geometricPrecision">
  <defs>
    <!-- In production make sure the mask id is discrete if you plan on using multiple instances on one page -->
    <mask id="circle_mask" x="0" y="0" width="300" height="300" maskUnits="userSpaceOnUse">
      <!-- The outer shape hides everything outside of the circle 
           This is necessary because the path used to create the bar does not perfectly
           match the shape of a circle. We render the path larger than needed and mask it's edges
           to create a perfect circle. -->
      <circle cx="150" cy="150" r="153" stroke-width="0" fill="black" opacity="1"/>
      
      <!-- The middle shape defines the visible area -->
      <circle cx="150" cy="150" r="150" stroke-width="0" fill="white" opacity="1"/>
      
      <!-- The inner shape creates the hole in the center.
           The value `r` defines the radius of the hole. -->
      <circle class="progress-radial-mask-inner" cx="150" cy="150" r="120" stroke-width="0" fill="black" opacity="1"/>
    </mask>
  </defs>
  <g mask="url(#circle_mask)">
    <circle class="progress-radial-track" cx="150" cy="150" r="150" stroke-width="0" opacity="1"/>
    <path class="progress-radial-bar" transform="translate(150, 150)" 
          d="M 0 0">
    </path>
  </g>
  <g style="font-family: Space Toaster;font-size:60pt; fill:black;"> 
    <text text-anchor="middle" id="mytext" x="150" y="165"> 10% </text> 
  </g>  
</svg>

JavaScript

var drawProgress = function(percent){
  if(isNaN(percent)) {
    return;
  }
  percent = parseFloat(percent);
  // Alot of the code below is inspired by a project I came across
  // online. I've saddly lost a reference to it. Do you know where
  // this might have come from?
  var bar = document.getElementsByClassName ('progress-radial-bar')[0]
  , α = percent * 360
  , π = Math.PI
  , t = 90
  , w = 153;
  if>= 360) {
    α = 359.999;
  }
  var r = ( α * π / 180 )
  , x = Math.sin( r ) * w
  , y = Math.cos( r ) * - w
  , mid = ( α > 180 ) ? 1 : 0 
  , animBar = 'M 0 0 v -%@ A %@ %@ 1 '.replace(/%@/gi, w)
  + mid + ' 1 '
  + x + ' '
  + y + ' z';
  bar.setAttribute( 'd', animBar );
};

var max = 1.0;
var progress = 0.0;
drawProgress(progress);

var interval = window.setInterval(function () {
  progress = progress + 0.01;
  if(progress >= max) {
    window.clearInterval(interval);
  }
  drawProgress(progress);
  // Set Progress Percentage
  document.getElementById("mytext").textContent = parseInt(progress * 100) + "%";
}, 30);

CSS :

.progress-radial {
  position: relative;
  display: block;
  margin: auto;
  transform: translate(-50%, 50%);
}

.progress-radial-track {
  fill: #A2C139;
}

.progress-radial-bar {
  fill: #339933;
}


3 comments:

  1. Recreated this using RactiveJS http://cdpn.io/jLevi

    ReplyDelete
  2. Similar project available for angular, though it's lacking animation atm. https://github.com/brandonaaskov/angular-radial

    Also, awesome use of unicode for variable naming :)

    ReplyDelete
  3. Ever since my last update to Chrome (36.0.1976.2 dev-m) this has stopped working properlly.
    The percentage bar isnt filling right.
    Oh well, very cool otherwise.
    Had some fun and made a version using my modded version of VLEX....
    http://jsbin.com/ditogatu/15/edit

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts