UI: add progress bar component

ds-ml-css/components/progress-bar.scss

+/* ********************************************************************************************* */
+/* * PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGR * */
+/* * PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGR * */
+/* ********************************************************************************************* */
+
+.progress-bar {
+  display: grid;
+  grid-template-rows: auto;
+  min-width: 48px;
+  max-width: 50%;
+
+  label {
+    display: grid;
+    grid-template-columns: 85% 15%;
+    span {
+      text-align: right;
+    }
+  }
+
+  progress {
+    height: 8px;
+    border: none;
+    border-radius: 4px;
+    margin-top: var(--ml-medium-px);
+    margin-bottom: var(--ml-medium-px);
+  }
+
+  progress::-webkit-progress-bar,
+  progress::-moz-progress-bar {
+    background-color: var(--ml-m500);
+  }
+
+  &.small {
+    progress {
+      height: 4px;
+    }
+  }
+
+  &.success {
+    progress::-webkit-progress-bar,
+    progress::-moz-progress-bar {
+      background-color: var(--ml-text-success);
+    }
+  }
+
+  &.error {
+    progress::-webkit-progress-bar,
+    progress::-moz-progress-bar {
+      background-color: var(--ml-text-error);
+    }
+  }
+
+  .status {
+    display: flex;
+    gap: var(--ml-small-px);
+  }
+
+  &.success {
+    .status {
+      color: var(--ml-text-success);
+    }
+  }
+
+  &.error {
+    .status {
+      color: var(--ml-text-error);
+    }
+  }
+}

ds-ml-css/ds-ml.scss

-@use 'ds-color-palet.scss';
-@use 'ds-ml-var.scss';
-@use 'ds-ml-color-var.scss';
+@use "ds-color-palet.scss";
+@use "ds-ml-var.scss";
+@use "ds-ml-color-var.scss";
 
 // components
-@use 'components/accordion.scss';
-@use 'components/badge.scss';
-@use 'components/button.scss';
-@use 'components/input.scss';
-@use 'components/radio-button-checkbox.scss';
+@use "components/accordion.scss";
+@use "components/badge.scss";
+@use "components/button.scss";
+@use "components/input.scss";
+@use "components/radio-button-checkbox.scss";
+@use "components/progress-bar.scss";
 
 :root {
   /* define fonts */
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
   font-size: 16px;
 }
+
+/* additionnal description for radio-button, progress-bar*/
+.additionnal-description {
+  color: var(--ml-text-secondary);
+  margin: 0;
+}