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 + "%");

			        if (width > 97) {
			            innerdiv.css("-khtml-border-top-right-radius", "7px");
                        innerdiv.css("border-top-right-radius", "7px");
                        innerdiv.css("-moz-border-top-right-radius", "7px");
			            innerdiv.css("-webkit-border-top-right-radius", "7px");
    
                        innerdiv.css("-khtml-border-bottom-right-radius", "7px");
                        innerdiv.css("border-bottom-right-radius", "7px");
                        innerdiv.css("-moz-border-bottom-right-radius", "7px");
                        innerdiv.css("-webkit-border-bottom-right-radius", "7px");
			        }
			        
			        div.find(".progressText").html(episodes + " / " + totalEpisodes);
			    }
		    );
        };
    })(jQuery);
</script>

<style>
/* progress bar container */
.progressbar
{
    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;
}

/* apply curves to the progress bar */
.progress
{
    -khtml-border-top-left-radius:7px;
    border-top-left-radius:7px;
    -moz-border-top-left-radius:7px;
    -webkit-border-top-left-radius:7px;
    
    -khtml-border-bottom-left-radius:7px;
    border-bottom-left-radius:7px;
    -moz-border-bottom-left-radius:7px;
    -webkit-border-bottom-left-radius:7px;
}

/* 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, 100);
</script>