1 files changed, 94 insertions, 0 deletions
diff --git a/src/sass/components/progress.scss b/src/sass/components/progress.scss
new file mode 100644
index 00000000..7490ee17
--- /dev/null
+++ b/src/sass/components/progress.scss
@@ -0,0 +1,94 @@
+// --------------------------------------------------------------
+// Playback progress
+// --------------------------------------------------------------
+
+.plyr__progress {
+    display: flex;
+    flex: 1;
+    position: relative;
+
+    input[type='range'] {
+        position: relative;
+        z-index: 2;
+    }
+
+    // Seek tooltip to show time
+    .plyr__tooltip {
+        font-size: $plyr-font-size-time;
+        left: 0;
+    }
+}
+
+.plyr__progress--buffer {
+    -webkit-appearance: none; /* stylelint-disable-line */
+    background: transparent;
+    border: 0;
+    border-radius: 100px;
+    height: $plyr-range-track-height;
+    left: 0;
+    margin: -($plyr-range-track-height / 2) 0 0;
+    padding: 0;
+    position: absolute;
+    top: 50%;
+    width: 100%;
+
+    &::-webkit-progress-bar {
+        background: transparent;
+        transition: width 0.2s ease;
+    }
+
+    &::-webkit-progress-value {
+        background: currentColor;
+        border-radius: 100px;
+        min-width: $plyr-range-track-height;
+    }
+
+    // Mozilla
+    &::-moz-progress-bar {
+        background: currentColor;
+        border-radius: 100px;
+        min-width: $plyr-range-track-height;
+        transition: width 0.2s ease;
+    }
+
+    // Microsoft
+    &::-ms-fill {
+        border-radius: 100px;
+        transition: width 0.2s ease;
+    }
+}
+
+.plyr--video .plyr__progress--buffer {
+    box-shadow: 0 1px 1px rgba(#000, 0.15);
+    color: $plyr-video-progress-buffered-bg;
+}
+
+.plyr--audio .plyr__progress--buffer {
+    color: $plyr-audio-progress-buffered-bg;
+}
+
+// Loading state
+.plyr--loading .plyr__progress--buffer {
+    animation: plyr-progress 1s linear infinite;
+    background-image: linear-gradient(
+        -45deg,
+        $plyr-progress-loading-bg 25%,
+        transparent 25%,
+        transparent 50%,
+        $plyr-progress-loading-bg 50%,
+        $plyr-progress-loading-bg 75%,
+        transparent 75%,
+        transparent
+    );
+    background-repeat: repeat-x;
+    background-size: $plyr-progress-loading-size $plyr-progress-loading-size;
+    color: transparent;
+}
+
+.plyr--video.plyr--loading .plyr__progress--buffer {
+    background-color: $plyr-video-progress-buffered-bg;
+}
+
+.plyr--audio.plyr--loading .plyr__progress--buffer {
+    background-color: $plyr-audio-progress-buffered-bg;
+}