timeDuration.js

// Creates a very pretty duration icon
angular.module('utilities').directive('timeDuration', [function () {
            return {
                restrict: 'E',
                template: '<canvas></canvas>',
                link: function (scope, element, attrs) {
                    var time = attrs.time;
                    var size = attrs.size ? attrs.size : 50;
                    var shadow = attrs.hasOwnProperty('shadow');
                    var background = attrs.background ? attrs.background : '#FFF';
                    var foreground = attrs.foreground ? attrs.foreground : '#CDCFD1'
                    var overfill = attrs.overfill ? attrs.overfill : '#A6A6A6'
                    var lines = attrs.lines ? attrs.lines : '#555';
                    var canvas = element[0].children[0];
                    canvas.width = size;
                    canvas.height = size;
                    var context = canvas.getContext('2d');
                    var x, y;
                    x = y = size / 2;
                    var radius = (size / 2) - 10;
                    var startAngle = (-1/2) * Math.PI;
                    drawBackground(x, y, context, radius, shadow, background, lines, size);
                    drawTime(x, y, context, radius, shadow, foreground, time, overfill);
                    drawLines(x, y, context, radius, size, time, lines);

                    function drawBackground(x, y, context, radius, shadow, fillColor, borderColor, size) {
                        context.beginPath();
                        context.moveTo(x, y);
                        context.fillStyle = fillColor;
                        context.strokeStyle = borderColor;
                        context.lineWidth = size / 25;
                        context.arc(x, y, radius, 0, 2 * Math.PI, false);
                        if (shadow) {
                            context.shadowColor = '#999';
                            context.shadowBlur = 10;
                            context.shadowOffsetX = context.shadowOffsetY = 5;
                        }
                        context.stroke();
                        context.fill();
                    }
                    function drawTime(x, y, context, radius, shadow, color, time, colorOverfill) {
                        var hourAng = time / 60 - 1 <= 0 ? 0 : Math.floor(time / 60) * (Math.PI / 6);
                        var minuteAng = ((time % 60) / 60) * 2 * Math.PI;

                        context.beginPath();
                        if (shadow) {
                            context.shadowOffsetX = context.shadowOffsetY = context.shadowBlur = 0;
                        }
                        context.moveTo(x, y);
                        context.fillStyle = color;
                        context.arc(x, y, radius, (-1 / 2) * Math.PI, minuteAng - (Math.PI / 2), false);
                        context.fill();
                        context.beginPath();
                        context.moveTo(x, y);
                        context.fillStyle = colorOverfill;
                        context.arc(x, y, radius, (-1 / 2) * Math.PI, hourAng - (Math.PI / 2), false);
                        context.fill();
                    }
                    function drawLines(x, y, ctx, radius, size, time, color) {
                        ctx.strokeStyle = color;
                        ctx.lineWidth = size / 50;
                        ctx.lineCap = "round"
                        ctx.beginPath();
                        ctx.translate(x, y);
                        var nums = [3,6,9,12];
                        for (i = 0; i<nums.length; i++) {
                            drawTick(nums[i] * Math.PI / 6, .85, 1);
                        }
                        var hourAng = time / 60 - 1 <= 0 ? 0 : Math.floor(time / 60) * (Math.PI / 6);
                        var minuteAng = ((time % 60) / 60) * 2 * Math.PI;
                        drawTick(hourAng, 0, .45)
                        drawTick(minuteAng, 0, .70)
                        function drawTick(ang, lengthStart, lengthEnd) {
                            ang = ang - Math.PI / 2
                            ctx.rotate(ang);
                            ctx.moveTo(radius * lengthStart, 0)
                            ctx.lineTo(radius * lengthEnd, 0)
                            ctx.rotate(-ang)
                            ctx.stroke();
                        }
                        
                    }
                }
            }
        }])

This emulates the duration icons provided in this icon set using an angular directive and a canvas element.