diff options
Diffstat (limited to 'src/less')
| -rw-r--r-- | src/less/plyr.less | 29 |
1 files changed, 27 insertions, 2 deletions
diff --git a/src/less/plyr.less b/src/less/plyr.less index 410404be..3f9b7d2d 100644 --- a/src/less/plyr.less +++ b/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'] { |