diff --git a/public/kalle.js b/public/kalle.js
index a2b2cb41059b65ad2fad46ca5096a900a8395ecd..ec9c25a80df71c3f0dcef91da8b1a65428e04d8a 100644
--- a/public/kalle.js
+++ b/public/kalle.js
@@ -38,10 +38,26 @@ function sendParty() {
     client.publish('kalle/effects', '["party"]')
 }
 
-function sendLoadingBar() {
+function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+async function sendLoadingBar() {
     const hex = document.querySelector("#loadingbar_inp").value;
-    const rgb = hexToRgb(hex);
-    client.publish('kalle/effects', `["loading-bar", ${rgb.r}, ${rgb.g}, ${rgb.b}]`);
+
+    for (let i = 0; i <= 7; i++) {
+        const rgb = hexToRgb(hex);
+        const ledId = i;
+
+        if (rgb) {
+            const message = [rgb.r, rgb.g, rgb.b];
+            client.publish(`kalle/led/${ledId}/color`, JSON.stringify(message), { retain: true });
+        } else {
+            console.error("Error HEX: ", hex);
+        }
+
+        await sleep(1000);
+    }
 }
 
 function hexToRgb(hex) {