mirror of https://github.com/lidarr/Lidarr
72 lines
1.4 KiB
Plaintext
72 lines
1.4 KiB
Plaintext
<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> |