progressBars/h.html at master · EthanPeacock/progressBars · GitHub

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html>
<head>
	<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
	<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> -->

	<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai&display=swap" rel="stylesheet">

	<style type="text/css">
		#mina {
			display: none;
			overflow: hidden;
		}
	</style>

</head>
<body>

	<script>
		$(function(){
			window.onload = (e) => {
				window.addEventListener('message', (event) => {
					var item = event.data;
					if (item !== undefined && item.type === "ui") {
						if (item.display === true) {
		                    $("#mina").show();
		                    console.log("starting this shit!");
							var start = new Date();
							var maxTime = item.time;
							var text = item.text;
							var timeoutVal = Math.floor(maxTime/100);
							animateUpdate();

							$('#pbar_innertext').text(text);

							function updateProgress(percentage) {
							    $('#pbar_innerdiv').css("width", percentage + "%");
							}

							function animateUpdate() {
								var now = new Date();
								var timeDiff = now.getTime() - start.getTime();
								var perc = Math.round((timeDiff/maxTime)*100);
								console.log(perc);
								if (perc <= 100) {
									updateProgress(perc);
									setTimeout(animateUpdate, timeoutVal);
								} else {
									$("#mina").hide();
								}
							}


						} else {
		                    $("#mina").hide();
		                }
					}
				});
			};
		});
	</script>

	<div id="mina">
		<div id="pbar_outerdiv" style="margin-top: 45.5%; left: 42.5%; background-color: rgba(0,0,0,0.25); width: 15%; height: 30px; z-index: 1; position: relative;">
			<div id="pbar_innerdiv" style="background-color: rgba(0, 161, 255, 0.95); z-index: 2; height: 100%; width: 0%;"></div>
			<div id="pbar_innertext" style="color: white; z-index: 3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-weight: bold; text-align: center; font-family: 'Baloo Bhai', cursive; margin-top: 2px;">0%</div>
		</div>
	</div>

</body>
</html>