JSFiddle - React, Tailwind, and code Playground

by stealthdave

HTML

<div class="gt-ratings-meter" data-gt-ratings-size="200">7.9</div>
<div class="gt-ratings-meter">4.3</div>
<div class="gt-ratings-meter" data-gt-ratings-duration="2000" data>10</div>
<div class="gt-ratings-meter" data-gt-ratings-fps="3" data>2.4</div>

CSS

.gt-ratings-meter {
    width: 220px;
    height: 220px;
    background: #039;
    border: 1px solid black;
    display: inline-block;
}

.gt-ratings-meter-container {
    display: block;
	position: relative;
    top: 50%;
    margin: 0 auto;
}
.gt-ratings-meter-container canvas {
	position: absolute;
	z-index: 10;
}
.gt-ratings-meter-container .gt-ratings-rating {
	color: #fff;
	font: bold 20px Verdana, Arial Black, sans-serif;
	width: 100%;
	height: 100%;
	text-align: center;
	text-shadow: 1px 2px #000;
	z-index: 20;
}

JavaScript

/**
 * @package: GT Updates M06 Latest Reviews
 * @module:  M06
 * @link:    http://confluence.mtvi.com/display/ENT/GT+Updates+M06+Latest+Reviews
 * @section: Content
 * @author:  $Author: stilld $
 * @usage: Any HTML element with the class "gt-ratings-meter" will have a meter inserted.  The element must be EMPTY except
 *         for the rating (from 0 - 10) as the contents of the div.  A non-numerical value or value outside this range
 *         will be ignored.
 * 
 *         Additional parameters may be set to affect the size, duration, and framerate of the animated meter.
 * 
 *         Example:
 * 
 *         ex1:
 * 			<div class="gt-ratings-meter">8.4</div>
 * 
 *         ex2:
 * 			<div class="gt-ratings-meter"
 * 				data-gt-ratings-size="90"
 * 				data-gt-ratings-duration="1000"
 * 				data-gt-ratings-fps="60">6.8</div>
 */

(function($) {
	$.fn.gtRatingsMeter = function(opts){
		// Draw the ratings arc
		function arcDraw(radius, percent, width, context, meter) {
			// clear the context
			meter.width = meter.width;
			if (percent >= 1) percent = 0.9999999;
			// set center and inner radius end point
			var center = meter.width / 2,
				innerRadius = radius - width,
				endPointX = center + (Math.cos((0 - Math.PI / 2) + Math.PI * 2 * (1 - percent)) * innerRadius),
				endPointY = center + (Math.sin((0 - Math.PI / 2) + Math.PI * 2 * (1 - percent)) * innerRadius);

			// start drawing!
			context.beginPath();
			context.arc(center,center,radius,(0 - Math.PI / 2),(0 - Math.PI / 2) + Math.PI * 2 * (1 - percent),true);
			context.lineTo(endPointX, endPointY);
			context.arc(center,center, innerRadius, (0 - Math.PI / 2) + Math.PI * 2 * (1 - percent), (0 - Math.PI / 2), false);

			context.closePath();

			context.clip();
			context.drawImage(img, (center - radius), (center - radius), radius * 2, radius * 2);
		}

		function drawFrame($this) {
			var lastFrame = false,
				meterObj = $this.data('meterObj'),
				currentRadian = meterObj.percent *...