Circle gauge

Circle gauge

by ninachroscicka

HTML

<div class="circle">
<div class="inner-value">95<span>%</span></div>
<div class="inner-text">Cupcakes eaten</div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Oswald);

.circle{
  position:relative;
  width:200px;
  height:200px;  
  overflow:hidden;
  font-family:Oswald;
}
.circle canvas{
  z-index:0;
}
.circle .inner-value{
position:absolute; 
  left:52%; 
  top:40%; 
  z-index:10;
  text-align:center;
  font-size:46px;
  color:#444;  
  transform: translate(-50%,-50%);  
}
.circle .inner-value span{
  font-size:24px;  
  vertical-align:text-top;
}
.circle .inner-text{
position:absolute; 
width:80%;
  left:50%; 
  top:60%; 
  z-index:10;
  text-align:center;
  font-size:18px;
  color:#888;  
  transform: translate(-50%,-50%);  
}

JavaScript

/*
jquery-circle-progress - jQuery Plugin to draw animated circular progress bars

URL: http://kottenator.github.io/jquery-circle-progress/
Author: Rostyslav Bryzgunov <[email protected]>
Version: 1.1.3
License: MIT
*/
(function($) {
    function CircleProgress(config) {
        this.init(config);
    }

    CircleProgress.prototype = {
          value: 0.0,
        size: 100.0,
        startAngle: -Math.PI,
        thickness: 'auto',
        fill: {
            gradient: ['#A7226E', '#2F9599']
        },
        emptyFill: 'rgba(0, 0, 0, .1)',
        animation: {
            duration: 1200,
            easing: 'circleProgressEasing'
        },       
        animationStartValue: 0.0,
        reverse: false,
        lineCap: 'butt',
        constructor: CircleProgress,
        el: null,
        canvas: null,
        ctx: null,
        radius: 0.0,
        arcFill: null,
        lastFrameValue: 0.0,
       
        init: function(config) {
            $.extend(this, config);
            this.radius = this.size / 2;
            this.initWidget();
            this.initFill();
            this.draw();
        },

        initWidget: function() {
            var canvas = this.canvas = this.canvas || $('<canvas>').prependTo(this.el)[0];
            canvas.width = this.size;
            canvas.height = this.size;
            this.ctx = canvas.getContext('2d');
        },
      
        initFill: function() {
            var self = this,
                fill = this.fill,
                ctx = this.ctx,
                size = this.size;

            if (!fill)
                throw Error("The fill is not specified!");


            if (fill.image) {
                var img;

                if (fill.image instanceof Image) {
                    img = fill.image;
                } else {
                    img = new Image();
                    img.src = fill.image;
                }

                if (img.complete)
                    setImageFill();
              ...