feat: new MD Progressbar

Author: nolimits4web

src/core/components/progressbar/progressbar-ios.less

@@ -1,9 +1,4 @@
 .ios {
-  .progressbar {
-    span {
-      border-radius: inherit;
-    }
-  }
   .progressbar-infinite {
     &:before {
       animation: ios-progressbar-infinite 1s linear infinite;

src/core/components/progressbar/progressbar-md.less

@@ -3,6 +3,18 @@
   @blue: #2196f3;
   @green: #4caf50;
   @yellow: #ffeb3b;
+  .progressbar:not(.progressbar-infinite) {
+    &::after {
+      content: '';
+      position: absolute;
+      width: var(--f7-progressbar-height);
+      height: var(--f7-progressbar-height);
+      border-radius: var(--f7-progressbar-border-radius);
+      right: 0;
+      top: 0;
+      background: var(--f7-progressbar-progress-color, var(--f7-theme-color));
+    }
+  }
   .progressbar-infinite {
     &:before {
       animation: md-progressbar-infinite-1 2s linear infinite;

src/core/components/progressbar/progressbar-vars.less

@@ -15,8 +15,9 @@
 });
 .md-vars({
   --f7-progressbar-height: 4px;
-  --f7-progressbar-border-radius: 0px;
+  --f7-progressbar-border-radius: 4px;
+
 });
 .md-color-vars({
-  --f7-progressbar-bg-color: rgba(var(--f7-theme-color-rgb), 0.5);
+  --f7-progressbar-bg-color: var(--f7-md-secondary-container);
 });

src/core/components/progressbar/progressbar.less

@@ -16,6 +16,7 @@
 .progressbar {
   vertical-align: middle;
   span {
+    border-radius: inherit;
     background-color: var(--f7-progressbar-progress-color, var(--f7-theme-color));
     width: 100%;
     height: 100%;
@@ -80,6 +81,11 @@ body,
     border-radius: 0 !important;
     transform-origin: center top !important;
   }
+  > .progressbar {
+    &::after {
+      display: none;
+    }
+  }
 }
 
 @keyframes progressbar-in {

src/core/components/range/range-vars.less

@@ -40,7 +40,7 @@
 });
 .md-vars({
   --f7-range-size: 20px;
-  --f7-range-bar-bg-color: var(--f7-md-secondary-container);
+
   --f7-range-bar-size: 16px;
   --f7-range-bar-border-radius: 16px;
   --f7-range-knob-width: 16px;
@@ -58,6 +58,7 @@
   --f7-range-scale-label-offset: 4px;
 });
 .md-color-vars({
+  --f7-range-bar-bg-color: var(--f7-md-secondary-container);
   --f7-range-knob-color: var(--f7-theme-color);
   --f7-range-label-text-color: var(--f7-md-on-primary);
   --f7-range-label-bg-color: var(--f7-theme-color);