Loading indicator

app/assets/javascripts/player/player_view.js.coffee

@@ -17,6 +17,7 @@ class AsciiIo.PlayerView extends Backbone.View
   createChildViews: ->
     @$el.append(@terminalView.$el)
     @terminalView.afterInsertedToDom()
+    @terminalView.showLoadingIndicator()
 
     @hudView = new AsciiIo.HudView()
     @$el.append(@hudView.$el)
@@ -32,6 +33,7 @@ class AsciiIo.PlayerView extends Backbone.View
       @movie.seek(percent)
 
     @movie.on 'movie-loaded', (asciicast) =>
+      @terminalView.hideLoadingIndicator()
       @hudView.setDuration(asciicast.get('duration'))
 
     @movie.on 'movie-playback-paused', =>

app/assets/javascripts/player/terminal_view.js.coffee

@@ -45,6 +45,12 @@ class AsciiIo.TerminalView extends Backbone.View
     height = @$el.height()
     @$el.css(width: width + 'px', height: height + 'px')
 
+  showLoadingIndicator: ->
+    @$el.append('<div class="loading">')
+
+  hideLoadingIndicator: ->
+    @$('.loading').remove()
+
   renderLine: (n, data, cursorX) ->
     html = []
     prevBrush = undefined

app/assets/stylesheets/asciicasts.css.scss

@@ -50,6 +50,18 @@ $color5: #EDC951;
       overflow-x: hidden;
       cursor: pointer;
 
+      .loading {
+        background-image: url(image-path('loader.gif'));
+        background-repeat: no-repeat;
+        background-position: center;
+        z-index: 10;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+      }
+
       .line {
         font-size: 12px;
         /* background-color: black;*/