diff --git a/client/functions.lua b/client/functions.lua
index 82310ec9..115ef672 100644
--- a/client/functions.lua
+++ b/client/functions.lua
@@ -186,6 +186,15 @@ ESX.ShowFloatingHelpNotification = function(msg, coords, timeout)
end
+ESX.ShowProgressBar = function(time, text)
+ SendNUIMessage({
+ type = "progressbar",
+ display = true,
+ time = time,
+ text = text
+ })
+end
+
ESX.TriggerServerCallback = function(name, cb, ...)
ESX.ServerCallbacks[ESX.CurrentRequestId] = cb
diff --git a/hud/app.css b/hud/app.css
index d1ab073f..3dd2044b 100644
--- a/hud/app.css
+++ b/hud/app.css
@@ -12,3 +12,8 @@ html, body, #frames, #frames > div, #frames > div > iframe {
left: 0;
top: 0;
}
+
+#pb {
+ display: none;
+ overflow: hidden;
+}
\ No newline at end of file
diff --git a/hud/index.html b/hud/index.html
index cf60df14..7f8d1a74 100644
--- a/hud/index.html
+++ b/hud/index.html
@@ -6,6 +6,7 @@
+
diff --git a/hud/progressbars.js b/hud/progressbars.js
new file mode 100644
index 00000000..49365ee5
--- /dev/null
+++ b/hud/progressbars.js
@@ -0,0 +1,35 @@
+document.getElementById('ui').innerHTML = "";
+$(function(){
+ window.onload = (e) => {
+ window.addEventListener('message', (event) => {
+ var item = event.data;
+ if (item !== undefined && item.type === "progressbar") {
+ if (item.display === true) {
+ $("#pb").show();
+ 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);
+ if (perc <= 100) {
+ updateProgress(perc);
+ setTimeout(animateUpdate, timeoutVal);
+ } else {
+ $("#pb").hide();
+ }
+ }
+ } else {
+ $("#pb").hide();
+ }
+ }
+ });
+ };
+});
\ No newline at end of file