fix(demo): added wrapper to progressbar (#3752)

Author: svetoldo4444ka

demo/src/app/components/+progressbar/demos/config/config.html

@@ -1 +1,3 @@
-<progressbar class="progress-striped active"  [value]="136" type="danger"><i>136 / 150</i></progressbar>
+<div class="mb-2">
+  <progressbar class="progress-striped active"  [value]="136" type="danger"><i>136 / 150</i></progressbar>
+</div>

demo/src/app/components/+progressbar/demos/dynamic/dynamic.html

@@ -1,11 +1,14 @@
-<progressbar [max]="max" [value]="dynamic">
-  <span style="color:white; white-space:nowrap;">{{dynamic}} / {{max}}</span>
-</progressbar>
-
-<small><em>No animation</em></small>
-<progressbar [animate]="false" [value]="dynamic" type="success"><b>{{dynamic}}%</b></progressbar>
-
-<small><em>Object (changes type based on value)</em></small>
-<progressbar class="progress-striped active" [value]="dynamic" [type]="type">{{type}}</progressbar>
-
+<div class="mb-2">
+  <progressbar [max]="max" [value]="dynamic">
+    <span class="text-nowrap">{{dynamic}} / {{max}}</span>
+  </progressbar>
+  <small><em>No animation</em></small>
+</div>
+<div class="mb-2">
+  <progressbar [animate]="false" [value]="dynamic" type="success"><b>{{dynamic}}%</b></progressbar>
+  <small><em>Object (changes type based on value)</em></small>
+</div>
+<div class="mb-3">
+  <progressbar class="progress-striped active" [value]="dynamic" [type]="type">{{type}}</progressbar>
+</div>
 <button type="button" class="btn btn-sm btn-primary" (click)="random()">Randomize</button>

demo/src/app/components/+progressbar/demos/stacked/stacked.html

@@ -1,7 +1,10 @@
-<div class="row col-lg-12">
-  <progressbar class="progress" [value]="stacked" [max]="100"></progressbar>
-</div>
-<br>
-<div class="row col-md-12">
-  <button type="button" class="btn btn-sm btn-primary" (click)="randomStacked()">Randomize</button>
+<div class="row">
+  <div class="col-lg-12">
+    <div class="mb-3">
+      <progressbar class="progress" [value]="stacked" [max]="100"></progressbar>
+    </div>
+  </div>
+  <div class="col-lg-12">
+    <button type="button" class="btn btn-sm btn-primary" (click)="randomStacked()">Randomize</button>
+  </div>
 </div>

demo/src/app/components/+progressbar/demos/static/static.html

@@ -1,11 +1,17 @@
 <div class="row">
   <div class="col-sm-4">
-    <progressbar [value]="55"></progressbar>
+    <div class="mb-2">
+      <progressbar [value]="55"></progressbar>
+    </div>
   </div>
   <div class="col-sm-4">
-    <progressbar [value]="22" type="warning" [striped]="true">22%</progressbar>
+    <div class="mb-2">
+      <progressbar [value]="22" type="warning" [striped]="true">22%</progressbar>
+    </div>
   </div>
   <div class="col-sm-4">
-    <progressbar max="200" [value]="166" type="danger" [striped]="true" [animate]="true"><i>166 / 200</i></progressbar>
+    <div class="mb-2">
+      <progressbar max="200" [value]="166" type="danger" [striped]="true" [animate]="true"><i>166 / 200</i></progressbar>
+    </div>
   </div>
 </div>