example jQuery plugin to make a media player button with circular progress indicator

round_progress_bar.html

<!-- modified/converted from http://blog.invatechs.com/round_progress_bar_with_html5_css3_and_javascript -->
<style>
.loader
{
    position: relative;
    width: 20px;
    height: 20px;
    float:left;
    user-select: none;
    box-sizing: border-box;
}
.loader-bg
{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}
.spinner-holder-one
{
    position: absolute;
    top:0;
    left:0;
    overflow: hidden;
    width: 50%;
    height: 50%;
    background: transparent;
    box-sizing: border-box;
}
.spinner-holder-two
{
    position: absolute;
    top:0;
    left:0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: transparent;
    box-sizing: border-box;
}
.loader-spinner
{
    width: 200%;
    height: 200%;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}  
.animate-0-25-a
{
    transform: rotate(90deg);
    transform-origin: 100% 100%;
}
.animate-0-25-b
{
    transform: rotate(-90deg);
    transform-origin: 100% 100%;
}
.animate-25-50-a
{
    transform: rotate(180deg);
    transform-origin: 100% 100%;
}
.animate-25-50-b
{
    transform: rotate(-90deg);
    transform-origin: 100% 100%;
}
.animate-50-75-a
{
    transform: rotate(270deg);
    transform-origin: 100% 100%;
}
.animate-50-75-b
{
    transform: rotate(-90deg);
    transform-origin:100% 100%;
}
.animate-75-100-a
{
    transform: rotate(0deg);
    transform-origin: 100% 100%;
}
.animate-75-100-b
{
    transform: rotate(-90deg);
    transform-origin: 100% 100%;
}
.loader-text
{
    text-align: center;
    /* padding-top:32%; */
    font-size: 8px;     
    color: rgba(0, 0, 0, 1.0);
}
.loader-text-stop
{
    text-align: center;
    line-height: 16px;     
    font-size: 14px;     
    color: rgba(0, 0, 0, 1.0);
}
.loader-text-play
{
    text-align: center;
    line-height: 16px;     
    font-size: 11px;     
    margin-left: 2px;
    color: rgba(0, 0, 0, 1.0);
}
</style>

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
(function($) {
    $.fn.PlayButton = function(opt) {
        var self = this;
        self.attr({class: "loader"});
        var stop_indicator = $("<span>", {class: "loader-text-stop"}).html("&#x25A0;");
        var play_indicator = $("<span>", {class: "loader-text-play"}).html("&#x25BA;");
        var button_text = $("<div>", {class: "loader-text"})
            .append(play_indicator).append(stop_indicator.hide());
        self.append($("<div>", {class: "loader-bg"}).append(button_text));
        var spinner_holder = [];
        for(var from=0; from<100; from+=25) {
            var range_string = from+"-"+(from+25);
            var holder_a       = $("<div>", {class: "spinner-holder-one animate-"+range_string+"-a"});
            var holder_b       = $("<div>", {class: "spinner-holder-two animate-"+range_string+"-b"});
            var loader_spinner = $("<div>", {class: "loader-spinner"});
            self.append(holder_a.append(holder_b.append(loader_spinner)));
            spinner_holder.push(holder_b);
        }
        self._current_progress = 0.0;
        self.is_playing = false;
        self.play = function() {
            self.is_playing = true;
            return self.progress();
        }
        self.pause = function() {
            self.is_playing = false;
            return self.progress();
        }
        self.progress = function(fval) {
            if(self.is_playing) {
                stop_indicator.show();
                play_indicator.hide();
            } else {
                stop_indicator.hide();
                play_indicator.show();
            }
            if(!fval) {
                return self._current_progress;
            }
            self._current_progress = fval;
            var percent = Math.round(Math.max(Math.min(fval, 1.0), 0.0) * 100);
            var angle, pie_index;
            if(percent<25){
                pie_index = 0;
                angle = Math.floor(-90 + fval*360);
            }
            else if(percent>=25 && percent<50){
                pie_index = 1;
                angle = Math.floor(-90 + (fval-0.25)*360);
            }
            else if(percent>=50 && percent<75){
                pie_index = 2;
                angle = Math.floor(-90 + (fval-0.5)*360);
            }
            else if(percent>=75 && percent<=100){
                pie_index = 3;
                angle = Math.floor(-90 + (fval-0.75)*360);
            }
            for(var i=0;i<spinner_holder.length;++i) {
                if(i < pie_index) {
                    spinner_holder[i].css("transform","rotate(0deg)");
                } else if(i == pie_index) {
                    spinner_holder[i].css("transform","rotate("+angle+"deg)");
                } else {
                    spinner_holder[i].css("transform","rotate(-90deg)");
                }
            }
            // button_text.html(percent+"%");
        }
        return self;

    };
    
}(jQuery));

$(function() {
    var p = $("#my-button").PlayButton();
    var now = 0.0, delta = 0.05;
    p.play();
    setInterval(function() {
        now += delta;
        if(now >= 1.0) {
            now = 0;
        }
        p.progress(now);
    }, 100);
});
</script>

<div id="my-button"></div>