Radarr/NzbDrone.Web/Views/Settings/Test.cshtml

<script>
    /*
    * jQuery doTimeout: Like setTimeout, but better! - v1.0 - 3/3/2010
    * http://benalman.com/projects/jquery-dotimeout-plugin/
    * 
    * Copyright (c) 2010 "Cowboy" Ben Alman
    * Dual licensed under the MIT and GPL licenses.
    * http://benalman.com/about/license/
    */
    (function ($) { var a = {}, c = "doTimeout", d = Array.prototype.slice; $[c] = function () { return b.apply(window, [0].concat(d.call(arguments))) }; $.fn[c] = function () { var f = d.call(arguments), e = b.apply(this, [c + f[0]].concat(f)); return typeof f[0] === "number" || typeof f[1] === "number" ? this : e }; function b(l) { var m = this, h, k = {}, g = l ? $.fn : $, n = arguments, i = 4, f = n[1], j = n[2], p = n[3]; if (typeof f !== "string") { i--; f = l = 0; j = n[1]; p = n[2] } if (l) { h = m.eq(0); h.data(l, k = h.data(l) || {}) } else { if (f) { k = a[f] || (a[f] = {}) } } k.id && clearTimeout(k.id); delete k.id; function e() { if (l) { h.removeData(l) } else { if (f) { delete a[f] } } } function o() { k.id = setTimeout(function () { k.fn() }, j) } if (p) { k.fn = function (q) { if (typeof p === "string") { p = g[p] } p.apply(m, d.call(n, i)) === true && !q ? o() : e() }; o() } else { if (k.fn) { j === undefined ? e() : k.fn(j === false); return true } else { e() } } } })(jQuery);
</script>

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

			        var width = Math.round(episodes / totalEpisodes * 100);

			        progressBar.css("width", width + "%");

			        if (width > 97) {
			            progressBar.css("-khtml-border-top-right-radius", "7px");
			            progressBar.css("border-top-right-radius", "7px");
			            progressBar.css("-moz-border-top-right-radius", "7px");
			            progressBar.css("-webkit-border-top-right-radius", "7px");

			            progressBar.css("-khtml-border-bottom-right-radius", "7px");
			            progressBar.css("border-bottom-right-radius", "7px");
			            progressBar.css("-moz-border-bottom-right-radius", "7px");
			            progressBar.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>
    $(document).ready(function () {

        i = 0;
        max = 50;

        $.doTimeout(20, function () {
            if (i == max + 1) {
                return false;
            }

            $("#progressbar").episodeProgress(i, 100);
            i++;

            return true;
        });

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