From 5d34b374dc3572b0a002e61fc7de5116b328a959 Mon Sep 17 00:00:00 2001
From: Alexandre Aubin <alex.aubin@mailoo.org>
Date: Fri, 17 May 2019 19:32:03 +0200
Subject: [PATCH] Improve progress bar display using strips for the 'ongoing'
 part

---
 src/css/style.less         | 8 ++++++++
 src/js/yunohost/helpers.js | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/css/style.less b/src/css/style.less
index c9e10ecd..69d051bd 100644
--- a/src/css/style.less
+++ b/src/css/style.less
@@ -558,6 +558,14 @@ input[type='radio'].nice-radio {
    border-radius: 5px;
 }
 
+.messages .progress-bar-striped {
+    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent);
+}
+
+.messages .progress-bar.active {
+   animation-direction: reverse;
+}
+
 /** custom badges **/
 .badge {
     &.badge-default {
diff --git a/src/js/yunohost/helpers.js b/src/js/yunohost/helpers.js
index a1890a07..d572807a 100644
--- a/src/js/yunohost/helpers.js
+++ b/src/js/yunohost/helpers.js
@@ -50,7 +50,7 @@
                 done = done * 100 / total;
                 ongoing = ongoing * 100 / total;
                 // Actually build the message with the progress bar
-                message = '<div class="progress"><div class="progress-bar progress-bar-success" role="progressbar" style="width:'+done+'%"></div><div class="progress-bar" role="progressbar" style="width:'+ongoing+'%;"></div></div><p style="display: inline-block;">' + message + '</p>';
+                message = '<div class="progress"><div class="progress-bar progress-bar-success" role="progressbar" style="width:'+done+'%"></div><div class="progress-bar progress-bar-striped active" role="progressbar" style="width:'+ongoing+'%;"></div></div><p style="display: inline-block;">' + message + '</p>';
             }
             else
             {