Permalink
Browse files

add loading animation before albums are populated

  • Loading branch information...
thenickcox committed Dec 20, 2014
1 parent 3ecb6d0 commit dad46829485039d18755ea235586e4ad4972be1a
@@ -3,4 +3,4 @@ $ ->
App.albumsListView = new App.AlbumsListView(collection: App.albums)
App.albums.fetch
success: ->
- App.albumsListView.setPlaceholder()
+ App.albumsListView.hideLoader().setPlaceholder()
@@ -7,9 +7,10 @@ App.AlbumsListView = Backbone.View.extend
for model in @collection.featured()
itemView = new App.AlbumItemView(model: model, listView: this)
@$el.append itemView.render().el
+ hideLoader: -> $('.loading').hide(); this
setPlaceholder: ->
if @collection.featured().length is 0
- $('.featured-albums').append('<p>No featured albums</p>')
+ $('.featured-albums').append('<p class="no-featured">No featured albums</p>')
else
$('.featured-albums').find('p').remove()
@@ -5,4 +5,53 @@
padding: 10px
width: 50%
+#featured
+ padding: 3px 0 0 15px
+.no-featured
+ position: relative
+ bottom: 8px
+
+p.loading
+ display: inline-block
+ margin: 0 0 -10px 0
+ .text
+ float: left
+
+span.loader
+ margin: 0 0 0 8px
+ font-size: 1.25px
+ position: relative
+ text-indent: -9999em
+ border-top: 1.1em solid rgba(0, 0, 0, 0.2)
+ border-right: 1.1em solid rgba(0, 0, 0, 0.2)
+ border-bottom: 1.1em solid rgba(0, 0, 0, 0.2)
+ border-left: 1.1em solid #428bca
+ -webkit-animation: load8 0.8s infinite linear
+ animation: load8 0.8s infinite linear
+ border-radius: 20px
+ width: 20px
+ height: 20px
+ display: block
+ float: left
+ &:after
+ border-radius: 50%
+ width: 10em
+ height: 10em
+
+@-webkit-keyframes load8
+ 0%
+ -webkit-transform: rotate(0deg)
+ transform: rotate(0deg)
+ 100%
+ -webkit-transform: rotate(360deg)
+ transform: rotate(360deg)
+
+
+@keyframes load8
+ 0%
+ -webkit-transform: rotate(0deg)
+ transform: rotate(0deg)
+ 100%
+ -webkit-transform: rotate(360deg)
+ transform: rotate(360deg)
@@ -1,6 +1,10 @@
%h1 Listing albums
.featured-albums.panel
+ %h3 Featured Albums
+ %p.loading
+ %span.text Loading featured albums
+ %span.loader
%ul#featured{ data: { 'user-id' => params[:user_id] } }
%table.table

0 comments on commit dad4682

Please sign in to comment.