Skip to content
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.
You can’t perform that action at this time.