1 files changed, 66 insertions, 0 deletions
diff --git a/templates/@theme-base/pm-styles/_pm-progressbar.scss b/templates/@theme-base/pm-styles/_pm-progressbar.scss
new file mode 100644
index 0000000..339edc5
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-progressbar.scss
@@ -0,0 +1,66 @@
+@mixin progressbar-size($size: .5em) {
+	height: $size;
+	border-radius: #{$size/2};
+
+	&::-webkit-progress-bar {
+		border-radius: #{$size/2};
+	}
+
+	&::-webkit-progress-value {
+		border-radius: #{$size/2};
+	}
+
+	&::-moz-progress-bar {
+		border-radius: #{$size/2};
+	}
+}
+
+.progressbar {
+	@include progressbar-size();
+
+	background: var(--bordercolor-input, $pm-global-border);
+	color: $pm-primary;
+	appearance: none;
+
+	&::-webkit-progress-bar {
+		background-color: var(--bordercolor-input, $pm-global-border);
+	}
+
+	&::-webkit-progress-value {
+		background: $pm-primary;
+		transition: .25s width easing(easeInOutQuint);
+	}
+
+	&::-moz-progress-bar {
+		background: $pm-primary;
+		transition: .25s width easing(easeInOutQuint);
+	}
+
+	&::-ms-fill {
+		border-color: currentColor;
+	}
+
+	@each $variant, $color in (
+		disabled : darken($pm-global-muted, 25%),
+		running  : $pm-global-info,
+		success  : $pm-global-success,
+		warning  : $pm-global-attention,
+		error    : $pm-global-warning
+	) {
+		&--#{$variant} {
+			color: $color;
+
+			&::-webkit-progress-value {
+				background: $color;
+			}
+
+			&::-moz-progress-bar {
+				background: $color;
+			}
+		}
+	}
+
+	&.is-thin {
+		@include progressbar-size(.25em);
+	}
+}