esx_progressbar

2026-08-29 09:18:53 +00:00 · 2022-04-28 18:29:06 +02:00
parent 4632747c1f
commit 0d50fe5602
6 changed files with 1279 additions and 0 deletions
@@ -0,0 +1,26 @@
+local function Progressbar(message,length, FreezePlayer,animation, onFinish)
+    if animation then 
+        if animation.type == "anim" then
+            ESX.Streaming.RequestAnimDict(animation.dict, function()
+                TaskPlayAnim(ESX.PlayerData.ped, animation.dict, animation.lib, 1.0, 1.0, length, 1, 1.0, false,false,false)
+            end)
+        end
+    end
+    if FreezePlayer then FreezeEntityPosition(PlayerPedId(),FreezePlayer) end
+    SendNuiMessage(json.encode({
+        type = "Progressbar",
+        length = length or 3000,
+        message = message or "ESX-Framework"
+    }))
+    Wait(length)
+    if FreezePlayer then FreezeEntityPosition(PlayerPedId(),not FreezePlayer) end
+    if onFinish then onFinish() end
+end
+
+exports('Progressbar', Progressbar)
+
+RegisterCommand("progress", function()
+    exports["esx_progressbar"]:Progressbar("test", 25000, false,{type = "anim",dict = "mini@prostitutes@sexlow_veh", lib ="low_car_sex_to_prop_p2_player" }, function()
+        print("finish")
+    end)
+end)
@@ -0,0 +1,15 @@
+fx_version 'adamant'
+game 'gta5'
+author 'ESX-Framework'
+description 'ESX Progressbar'
+
+client_scripts { 'Progress.lua' }
+shared_script '@es_extended/imports.lua'
+ui_page 'nui/index.html'
+
+files {
+    'nui/index.html',
+    'nui/js/*.js',
+    'nui/css/*.css',
+    'nui/img/*.png',
+}
@@ -0,0 +1,14 @@
+:root {
+    --color: white;
+    --bgColor: #212121;
+}
+
+* {
+    padding: 0;
+    margin: 0;
+}
+
+body {
+    color: var(--color);
+    font-family: sans-serif;
+}
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
+    <script src="https://kit.fontawesome.com/a81368914c.js"></script>
+    <link rel="stylesheet" href="css/style.css">
+    <script src="js/script.js"></script>
+</head>
+<body>
+    <div id="notifyInfo" class="notify">
+        <div class="innerText">
+            <i class="fas fa-info-circle icon info"></i>
+            <p class="text" id="infoMessage"></p>
+        </div>
+        <div id="progline" class="progline">
+    </div>
+</body>
+</html>
+
+<style>
+
+
+.notify {
+        flex: auto;
+        display: none;
+        position:absolute;
+        margin: 0 auto;
+        left: 0;
+        right: 0;
+        bottom: 100px;
+        min-width:15%;
+        width:fit-content; 
+        height:45px;
+        background-color:rgba(5, 5, 5, 0.800);
+        border-radius: 5px;
+        animation: growDown 300ms ease-in-out;
+        padding-right: 10px;
+    }
+
+    .progline {
+        position:absolute;
+        bottom:0;
+        left:0;
+        right:0;
+        height:2px;
+        width:100%;
+        border-radius: 20px;
+        background: linear-gradient(to right, #0052d4, #4364f7, #6fb1fc); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    }
+
+    .icon {
+        border: 0;
+    }
+
+    .innerText {
+        flex: auto;
+        margin-top: 15px;
+        width:100%;
+    }
+
+    .innerText{
+        margin-left: 10px;
+    }
+    p {
+        flex: auto;
+        word-wrap: break-word;
+        margin-left: 30px; 
+        margin-top: 15px;
+    }
+
+    .innerText .icon {
+        float: left;
+        margin-left: 5px;
+        font-size: 20px;
+    }
+
+    @keyframes growDown {
+        0% {
+            transform: scaleY(0);
+        }
+        80% {
+            transform: scaleY(1.1)
+        }
+        100% {
+            transform: scaleY(1)
+        }
+    }
+</style>
@@ -0,0 +1,33 @@
+const w = window
+const doc = document
+
+$(function () {
+    w.addEventListener('message', function(e) {
+        $(".text").text(e.data.message)
+        if (e.data.type === "Progressbar") {
+            doc.getElementById("notifyInfo").style.display = "block";
+            const start = new Date();
+            const maxTime = e.data.length
+            const timeoutValue = Math.floor(maxTime/100);
+            animUpdate();
+
+            function updateProg(prc) {
+                $("#progline").css("width", prc + "%");
+            }
+            
+            function animUpdate() {
+                const now = new Date();
+                const timeoutDiff = now.getTime() - start.getTime();
+                const prc = Math.round((timeoutDiff/maxTime)*100);
+                if (prc <= 100) {
+                    updateProg(prc);
+                    setTimeout(animUpdate, timeoutValue);
+                } else {
+                   doc.getElementById('notifyInfo').style.display = "none";
+                }
+            }
+        } else {
+            doc.getElementById("notifyInfo").style.display = "none"
+        }
+    })
+})