0.0.1

resources/[creators]/jobs_creator/utils/dialogs/progressbar/progressbar.css

@@ -0,0 +1,44 @@
+section.progressbar-section {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    align-items: center;
+    text-align: center;
+}
+
+h1.progressbar-text {
+    font-size: 24px;
+    color: #fff;
+    margin-bottom: 20px;
+    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1.0);
+}
+
+ul.loader {
+    width: 40%;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+
+ul.loader li {
+    width: 0;
+    height: 2px;
+    background-color: rgba(255,255,255,0); 
+}
+
+ul.loader li.background-bar {
+    width: 100%;
+    height: 2px;
+    position: absolute;
+}
+
+ul.loader li.empty {
+    box-shadow: none;
+}
+
+ul.loader li.filled {
+    width: 100%;
+    transition: width 0.5s linear;
+}

resources/[creators]/jobs_creator/utils/dialogs/progressbar/progressbar.js

@@ -0,0 +1,57 @@
+let progressBarTimeout;
+
+function startTimedProgressBar(time, text, color="#47ff33") {
+    var cssLink = document.createElement("link");
+    cssLink.href = "../utils/dialogs/progressbar/progressbar.css";
+    cssLink.rel = "stylesheet";
+    cssLink.type = "text/css";
+
+    document.head.appendChild(cssLink);
+
+    const div = $(`
+        <section class="fixed-bottom mb-5 progressbar-section">
+            <h1 class="progressbar-text">Loading...</h1>
+            <ul class="loader p-0">
+            
+            </ul>
+        </section>
+    `);
+
+    let duration = time;
+    div.find("h1").text(text);
+
+    div.find(".loader").append(`<li class="bar empty"></li>`);
+    div.find(".loader").append(`<li class="background-bar"></li>`);
+
+    div.find(".bar").css("transition-duration", `${duration}ms`);
+    div.find(".background-bar").css("background-color", `${color}20`); // Aggiunge l'alpha 0.2 al colore
+    
+    setTimeout(() => {
+        div.find(".bar").removeClass("empty");
+        div.find(".bar").addClass("filled");
+        div.find(".filled").css("box-shadow", `inset 0 0 10px 2px ${color}, 0 0 25px 5px ${color}, 0 0 10px 2px rgba(0, 0, 0, 0.5)`); // Aggiungi questa riga qui
+    }, 100);
+
+    progressBarTimeout = setTimeout(() => {
+        div.remove();
+    }, duration + 100);
+
+    $("body").append(div);
+}
+
+function stopProgressBar() {
+    clearTimeout(progressBarTimeout);
+    $('.progressbar-section').remove();
+}
+
+// Messages received by client
+window.addEventListener('message', (event) => {
+	let data = event.data;
+	let action = data.action;
+
+    if(action == "progressBar") {
+		startTimedProgressBar(data.time, data.text, data.hexColor)
+	} else if(action == "stopProgressBar") {
+		stopProgressBar();
+	}
+})