sonarr-repo-only/NzbDrone.Web/Views/Settings/Test.cshtml

<script>
    (function ($) {
        $.fn.episodeProgress = function (episodes, totalEpisodes) {
            return this.each(
			    function () {
			        var div = $(this);
			        var innerdiv = div.find(".progress");

			        var width = Math.round(episodes / totalEpisodes * 100);
			        innerdiv.css("width", width + "%");
			        div.find(".progressText").html(episodes + " / " + totalEpisodes);
			    }
		    );
        };
    })(jQuery);
</script>

<style>
/* progress bar container */
.progressbar
{
    z-index: 1;
    border:1px solid grey;
    -khtml-border-radius:8px;
    border-radius:8px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    width:125px;
    height:20px;
    position:relative;
    color:black; 
}

.progress
{
    z-index: 5;
}

/* color bar */
.progressbar div.progress
{
    position:absolute;
    width:0;
    height:100%;
    overflow:hidden;
    background-color:#065EFE;
}
/* text on bar */
.progressbar div.progress .progressText{
    position:absolute;
    text-align:center;
    color:white;
}
/* text off bar */
.progressbar div.progressText{
    position:absolute;
    width:100%;
    height:100%;
    text-align:center;
}
</style>

<div id="progressbar" class="progressbar">
    <div class="progressText"></div>
    <div class="progress">
        <span class="progressText" style="width: 125px;"></span>
    </div>
</div>

<script>
    $("#progressbar").episodeProgress(100, 200);
</script>