blob: ff9a65f450b31edad7455083a4ba5e315dd58ace (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
{% extends "layout.html" %}
{% block content %}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var r = Math.floor(Math.random() * Math.floor(200));
var g = Math.floor(Math.random() * Math.floor(200));
var b = Math.floor(Math.random() * Math.floor(200));
document.body.style.backgroundColor = 'rgba('+r+','+g+','+b+',0.1)'
var source = new EventSource("/{{url_in}}");
source.onmessage = function(event) {
$('.progress-bar').css('width', event.data+'%').attr('aria-valuenow', event.data);
$('.progress-bar-label').text(event.data+'%');
var alpha = 1-event.data/150
document.body.style.backgroundColor = 'rgba('+r+','+g+','+b+',0.3)'.replace(/[^,]+(?=\))/, alpha)
if(event.data == 100){
window.location.replace("/{{url_out}}")
source.close()
}
}
</script>
<br>
<b> I am handling all your work while you are watching this progress bar ... </b>
<div id="progs" class="progress" style="width: 50%; margin: 50px;">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<span class="progress-bar-label">0%</span>
</div>
</div>
{% endblock %}
|
