Loading state handling

Fixes #36

src/sass/plyr.scss

@@ -21,13 +21,14 @@ $controls-bg: 				$gray-dark;
 $control-bg-hover: 			$blue;
 $control-color: 			$gray-light;
 $control-color-inactive: 	$gray;
-$control-color-focus: 		#fff;
 $control-color-hover: 		#fff;
 
 // Progress
 $progress-bg: 				lighten($gray, 10%);
 $progress-playing-bg: 		$blue;
 $progress-buffered-bg: 		$gray;
+$progress-loading-size: 	40px;
+$progress-loading-bg: 		rgba(0,0,0, .15);
 
 // Range
 $volume-track-height: 		6px;
@@ -61,7 +62,6 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 	&:after { content: ""; display: table; }
 	&:after { clear: both; }
 }
-
 // Tab focus styles
 @mixin tab-focus()
 {
@@ -69,6 +69,12 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 	outline-offset: 0;
 }
 
+// Animation
+// ---------------------------------------
+@keyframes progress {
+	to { background-position: @progress-loading-size 0; }
+}
+
 // <input type="range"> styling
 // ---------------------------------------
 @mixin volume-thumb()
@@ -91,7 +97,7 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 @mixin seek-thumb() {
 	background: transparent;
 	border: 0;
-	width: 2px;
+	width: ($control-spacing * 2);
 	height: $control-spacing;
 }
 @mixin seek-track() {
@@ -350,6 +356,24 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 		}
 	}
 
+	// Loading state
+	&.loading .player-progress-buffer {
+		animation: progress 1s linear infinite;
+		background-size: $progress-loading-size $progress-loading-size;
+		background-repeat: repeat-x;
+		background-color: $progress-buffered-bg;
+		background-image: linear-gradient(
+			-45deg, 
+			$progress-loading-bg 25%, 
+			transparent 25%, 
+			transparent 50%, 
+			$progress-loading-bg 50%, 
+			$progress-loading-bg 75%,
+			transparent 75%, 
+			transparent);
+	    color: transparent;
+	}
+
 	// States
 	&-controls [data-player='pause'],
 	&.playing .player-controls [data-player='play'] {