Loading state handling

Fixes #36

src/less/plyr.less

@@ -27,6 +27,8 @@
 @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);
 
 // Volume
 @volume-track-height: 		6px;
@@ -59,13 +61,18 @@
 	&:after { content: ""; display: table; }
 	&:after { clear: both; }
 }
-
 // Tab focus styles
 .tab-focus() {
 	outline: thin dotted #000;
 	outline-offset: 0;
 }
 
+// Animation
+// ---------------------------------------
+@keyframes progress {
+	to { background-position: @progress-loading-size 0; }
+}
+
 // <input type="range"> styling
 // ---------------------------------------
 .volume-thumb() {
@@ -86,7 +93,7 @@
 .seek-thumb() {
 	background: transparent;
 	border: 0;
-	width: 2px;
+	width: (@control-spacing * 2);
 	height: @control-spacing;
 }
 .seek-track() {
@@ -345,6 +352,24 @@
 		}
 	}
 
+	// 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'] {