Animated Poll Rating

by Jayson Buquia

HTML

<div class="c-poll-rating">   
    
    <svg class="c-poll-rating__shape" width="150px" height="150px" viewBox="0 0 200 200">
        
   <defs>
    <clipPath id="clip-circle">
      <circle cx="100" cy="100" r="100"></circle>
    </clipPath>
  </defs>
    <circle class="gray" cx="100" cy="100" r="100" clip-path="url(#clip-circle)"/>
    <circle class="red" id="rating" cx="100" cy="100" r="100" clip-path="url(#clip-circle)"/>
</svg>
    
    <h2 class="c-poll__percent">
        0%
    </h2>
    
</div>

SCSS

.c-poll-rating {
    position: relative;
    display: table;
}

.c-poll-rating__shape {
    width: 200px;
    height: 200px;
    background: transparent;
    transform: rotate(-90deg);
    
    circle {
        stroke-width: 200;
        fill: transparent;
        transition: stroke-dashoffset 1s ease;
    }
    
    .gray {
        stroke: silver;        
    }
    
    .red {
        stroke: red;
        stroke-dasharray: 628;
        stroke-dashoffset: 628;
    }
    
}

.c-poll__percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    margin: 0;
}

JavaScript

var rating 	= $('#rating'),
    counter = null,
    percent = 65,
    currCount = 0,
    percentDisplay = $('.c-poll__percent');

function strokeIn(p) {
	rating.css('stroke-dashoffset',628*(1-p/100));
}

function updatePercentDisplay(p) {
	percentDisplay.text(p+'%');
}

function incrementRatingDisplay() {
	currCount++;
    if ( currCount <= percent ) {
    	updatePercentDisplay(currCount);
    } else {
    	clearInterval(counter);
    }
}

counter =  setInterval(incrementRatingDisplay,1000/percent);

strokeIn(percent);