# Help with integrating CSS progress bars

**URL:** https://discourse.nodered.org/t/help-with-integrating-css-progress-bars/31030
**Category:** Dashboard
**Created:** [2 August 2020 01:30 UTC](https://discourse.nodered.org/t/help-with-integrating-css-progress-bars/31030 "2020-08-02T01:30:32Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![RASelkirk](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/raselkirk/32/57425_2.png) [@RASelkirk](https://discourse.nodered.org/u/RASelkirk)
#### Post date: [2 August 2020 01:30 UTC](https://discourse.nodered.org/t/help-with-integrating-css-progress-bars/31030/1 "2020-08-02T01:30:32Z")

</div>

I couldn't find any progress bars, but did find some really neat animated HTML/CSS [progress bars](https://freefrontend.com/css-loaders/), can they be added to N-R Dashboard? How would one get started?

Also, I see no method of starting/stopping these animations?

Thanks!

Russ

---

<div class="post-metadata">

### Author: ![ristomatti](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ristomatti/32/5857_2.png) [@ristomatti](https://discourse.nodered.org/u/ristomatti)
#### Post date: [2 August 2020 01:45 UTC](https://discourse.nodered.org/t/help-with-integrating-css-progress-bars/31030/2 "2020-08-02T01:45:11Z")

</div>

Hi, I've edited the title to better describe your problem so that this will hopefully better catch the attention of people who potentially can help you. Hope you don't mind.

---

<div class="post-metadata">

### Author: ![RASelkirk](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/raselkirk/32/57425_2.png) [@RASelkirk](https://discourse.nodered.org/u/RASelkirk)
#### Post date: [2 August 2020 02:50 UTC](https://discourse.nodered.org/t/help-with-integrating-css-progress-bars/31030/3 "2020-08-02T02:50:57Z")

</div>

Not at all, thanks!

Russ

---

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [2 August 2020 07:17 UTC](https://discourse.nodered.org/t/help-with-integrating-css-progress-bars/31030/4 "2020-08-02T07:17:51Z")

</div>

Hi Russ,  
That is a coincidence. Wanted to ask also this morning how to show a progress bar in the dashboard. I tried last week to start a "_simple_" progress bar when a button is clicked. Summarized (but _ **not tested** _!) I did look something like this:

```auto
<md-button ng-click="onClick()">Do some long processing</md-button>
<md-progress-circular ng-show="showProgressBar" md-mode="indeterminate"></md-progress-circular>
<script>
(function(scope) {
    scope.onClick= function() {
        // Show the progress bar
        $scope.showProgressBar = true;

        // Some processing that takes 5 seconds
       setTimeout(function() { alert("Hello"); 
           // Hide the progress bar
           $scope.showProgressBar = false;
       }, 5000);
    }
})(scope);
</script>

```

But the _ **result was awful** _. Seemed to me that the round spinner was displayed inside the the md-card of my md-button, so it was not completely visible ...

Anyway perhaps you can add your CSS styles to such a "md-progress-circular"?  
I have no idea how to solve this 🥴

---

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [2 August 2020 21:32 UTC](https://discourse.nodered.org/t/help-with-integrating-css-progress-bars/31030/5 "2020-08-02T21:32:31Z")

</div>

Russ,  
I see in the dashboard [repository](https://github.com/node-red/node-red-dashboard/blob/78b83e5d21d883bccbf881a1c2742e041ae1dc7d/dist/css/app.min.less#L575) that there is some styling available for an `md-progress-linear`. So I tried such a linear progress bar:

```auto
<md-button ng-click="onClick()">Do some long processing</md-button>
<md-progress-linear ng-show="showProgressBar" md-mode="indeterminate"></md-progress-linear>
<script>
(function(scope) {
    scope.onClick= function() {
        // Show the progress bar
        scope.showProgressBar = true;

        // Some processing that takes 5 seconds
       setTimeout(function() { alert("Hello"); 
           // Hide the progress bar
           scope.showProgressBar = false;
       }, 5000);
    }
})(scope);
</script>

```

And I needed to increase the Template width (from `1` to `2`):

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/9/d99447b5325060e86ab3e61ed4676e9a45966423.png)

And then I get this result:

![progressbar](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/7/876fc75a7a3a82515317a4652c6055c9bbe569c4.gif)

But that is still far away from the progress bars from your link ...  
Unfortunately I will be not much available on this forum the next two weeks, so hopefully some else can assist you further with this ...  
Good luck with it!  
Bart

---

<div class="post-metadata">

### Author: ![RASelkirk](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/raselkirk/32/57425_2.png) [@RASelkirk](https://discourse.nodered.org/u/RASelkirk)
#### Post date: [2 August 2020 22:46 UTC](https://discourse.nodered.org/t/help-with-integrating-css-progress-bars/31030/6 "2020-08-02T22:46:25Z")

</div>

That does work for me, thanks! I'm still gonna tinker with the HTML/CSS as I find information.

Russ

---

<div class="post-metadata">

### Author: ![T0T4R4](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/t0t4r4/32/10850_2.png) [@T0T4R4](https://discourse.nodered.org/u/T0T4R4)
#### Post date: [10 August 2020 00:01 UTC](https://discourse.nodered.org/t/help-with-integrating-css-progress-bars/31030/8 "2020-08-10T00:01:04Z")

</div>

Ok, from the simple example [on the w3 school webpage](https://www.w3schools.com/w3css/w3css_progressbar.asp), I managed to get this to work...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/5/35062c347591048023ab6b4a4af7f9d71a639c23.png)

![2020-08-10-09-57-35](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/e/cef231b4dd9072f048522e669918b056728ebb17.gif)

Flow:

```auto
[{"id":"db2754d5.e6c8a8","type":"tab","label":"Flow 4","disabled":false,"info":""},{"id":"dda1ba0f.5910e8","type":"ui_template","z":"db2754d5.e6c8a8","group":"f89749a5.94da88","name":"html progressbar","order":0,"width":"10","height":"2","format":"<style>\n .w3-border {\n border: 1px solid #ccc!important;\n }\n .w3-green, .w3-hover-green:hover {\n color: #fff!important;\n background-color: #4CAF50!important;\n }\n</style>\n<div>\n <div class=\"w3-border\">\n <div class=\"w3-green\" style=\"height:24px; width:{{msg.counter}}%\"></div>\n <span ng-if=\"msg.counter === null\">COMPLETE !</span>\n </div>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":280,"wires":[["5da5084a.902718"]]},{"id":"86865e90.ffc68","type":"counter-loop","z":"db2754d5.e6c8a8","name":"","counter":"counter","counterType":"msg","reset":true,"resetValue":"value-null","initial":"1","initialType":"num","operator":"lt","termination":"100","terminationType":"num","increment":"1","incrementType":"num","x":430,"y":200,"wires":[["dda1ba0f.5910e8"],["dda1ba0f.5910e8"]]},{"id":"276c4a18.5725e6","type":"delay","z":"db2754d5.e6c8a8","name":"","pauseType":"delay","timeout":"100","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":250,"y":280,"wires":[["86865e90.ffc68"]]},{"id":"55d063f.542019c","type":"ui_button","z":"db2754d5.e6c8a8","name":"","group":"f89749a5.94da88","order":1,"width":"2","height":"1","passthru":false,"label":"Start","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":210,"y":200,"wires":[["86865e90.ffc68"]]},{"id":"5da5084a.902718","type":"switch","z":"db2754d5.e6c8a8","name":"continue if counter is defined","property":"counter","propertyType":"msg","rules":[{"t":"gt","v":"0","vt":"num"}],"checkall":"true","repair":false,"outputs":1,"x":380,"y":360,"wires":[["276c4a18.5725e6"]]},{"id":"fce07864.d1c708","type":"inject","z":"db2754d5.e6c8a8","name":"On Start","props":[{"p":"counter","v":"0","vt":"num"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":240,"y":120,"wires":[["dda1ba0f.5910e8"]]},{"id":"f89749a5.94da88","type":"ui_group","z":"","name":"Default","tab":"1ce70d5f.826003","order":1,"disp":true,"width":"10","collapse":false},{"id":"1ce70d5f.826003","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

Requirements :

- node-red-dashboard
- node-red-contrib-loop-processing (for the example with the counter in the above flow only)

---

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [10 August 2020 05:19 UTC](https://discourse.nodered.org/t/help-with-integrating-css-progress-bars/31030/9 "2020-08-10T05:19:49Z")

</div>

Hi Mathieu,  
That looks already good!  
Do you think it is also possible:

- To have a round spinning one, for cases where you have no idea how long the processing will take?
- To show this on top of the other ui elements, to make sure the user meanwhile doesn't trigger anything else?

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [9 September 2020 05:20 UTC](https://discourse.nodered.org/t/help-with-integrating-css-progress-bars/31030/10 "2020-09-09T05:20:00Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.