JSFiddle - React, Tailwind, and code Playground

Animated percentage indicator with Snap.svg with interactive legend http://codepen.io/ggaulard/details/caKBj/

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<div class="frame">
  <div class="content">
    <h1>Donut animated</h1>  
    <svg id="svg"></svg>
    <button class="btn btn-default"><i class="fa fa-repeat"></i> replay</button>
  </div>
  <div class="author"></div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,200,100);
html {
  background: url(https://imagizer.imageshack.us/v2/1024x1024q90/r/661/oJqOCI.jpg) no-repeat center center fixed;
  background-size: cover;
  padding: 20px 0px;
}

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #333;
  background: transparent;
}
body .frame {
  padding: 20px;
  background: rgba(255, 255, 255, 0.5);
  margin: auto;
  max-width: 500px;
}
body .frame .content {
  padding: 20px;
  background: #fff;
}
body .frame .content h1 {
  margin: 0 0 10px 0;
  text-align: center;
}
body .frame .author {
  padding-top: 20px;
  text-align: center;
}

a, a:active, a:focus {
  color: #844236;
  text-decoration: none;
}

a:hover {
  color: #cb844e;
  text-decoration: none;
}

a, a:active, a:focus, a:hover {
  font-weight: 100;
}

h1, h2 {
  color: #844236;
  font-weight: 100;
  text-transform: uppercase;
}
h1 a, h2 a {
  font-size: 14px;
  text-transform: lowercase;
  cursor: pointer;
}

#svg {
  width: 400px;
  height: 200px;
}

.content {
  text-align: center;
}

JavaScript

// Bootstrap v3.1.0
// Font Awesome 4.1.0

// http://www.w3schools.com/browsers/browsers_stats.asp
//2014	Chrome  Internet Explorer  Firefox  Safari  Opera
//August 60.1 %  8.3 %	           24.7 %   3.7 %   1.8 %

var browserStats = [
    {
        value: 60.1,
        label: 'Chrome',
        color: '#7F623A'
    },
    {
        value: 24.7,
        label: 'Firefox',
        color: '#FFC575'
    },
    {
        value: 9.3,
        label: 'Internet Explorer',
        color: '#FFE5C1'
    },
    {
        value: 3.7,
        label: 'Safari',
        color: '#7F7361'
    },
    {
        value: 2.2,
        label: 'Opera',
        color: '#CC9E5E'
    },
];

/***********************************************************
 * Create framework
 ***********************************************************/
(function ($, doc, win, Snap) {
    "use strict";

    function Donut(el, opts) {
        this.$el = $(el);
        this.opts = opts;
        this.snap = Snap(el);

        this.startShowAnimation = Donut.prototype.startShowAnimation;
  
        this.init();
    }

    /***********************************************************
     * Init donut
     ***********************************************************/
    Donut.prototype.init = function () {
        this.drawLegend();
        this.drawBaseCircle();
    };

    /***********************************************************
     * Draw base circle
     ***********************************************************/
    Donut.prototype.drawBaseCircle = function () {
        var s = this.snap,
            o = this.opts;

        // create diagonal pattern
        var pattern = s.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({
            fill: "none",
            stroke: "#FFC575",
            strokeWidth: 5
        });
        pattern = pattern.pattern(0, 0, 10, 10);

        // create masking circle
        var mask = s.circle(o.center.y, o.center.y, o.radius).attr({
            fill: pattern
        });

        //...