Made loading template for videos more appealing. Fixes #5

bluecontainer · Jul 31, 2014 · b3da67e · b3da67e
1 parent 53102a2
commit b3da67e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 66 deletions.
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -18,70 +18,14 @@
   background-color: transparent;
 }
 
-.circle{
-  width:25px;
-  height:25px;
-  border-radius:12px;
-  /*font-size:20px;*/
-  color:#fff;
-  line-height:25px;
-  text-align:center;
-  background:#000;
-}
-
-.animated {
-    -webkit-animation-duration: 1s;
-    animation-duration: 1s;
-    -webkit-animation-fill-mode: both;
-    animation-fill-mode: both;
-
-    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-}
-
-@-webkit-keyframes bounceIn {
-    0% {
-        opacity: 0;
-        -webkit-transform: scale(.3);
-    }
-
-    50% {
-        opacity: 1;
-        -webkit-transform: scale(1.05);
-    }
-
-    70% {
-        -webkit-transform: scale(.9);
-    }
-
-    100% {
-        -webkit-transform: scale(1);
-    }
-}
-
-@keyframes bounceIn {
-    0% {
-        opacity: 0;
-        transform: scale(.3);
-    }
-
-    50% {
-        opacity: 1;
-        transform: scale(1.05);
-    }
-
-    70% {
-        transform: scale(.9);
-    }
-
-    100% {
-        transform: scale(1);
-    }
-}
-
-.bounceIn {
-    -webkit-animation-name: bounceIn;
-    animation-name: bounceIn;
+.spinner {
+    width: 206px;
+    height: 155px;
+    background-image: url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif');
+    background-size: contain;
+    background-size: 37px 37px;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
 }
 
 .hide {

diff --git a/app/assets/templates/video.html b/app/assets/templates/video.html
@@ -2,8 +2,7 @@
     <a href="" onclick="snapper.open('left');" ng-click="result.selectVideo(video);"><img ng-src="{{video.thumbnails[thumbnailId()]}}"></a>
 </div>
 <div ng-if="!isLoaded(video)">
-    <a href="" class="hide" onclick="snapper.open('left');" ng-click="result.selectVideo(video);"><img ng-src="{{video.thumbnails[thumbnailId()]}}"></a>
-    LOADING
+    <div class="spinner"></div>
 </div>
 <div class="hilight">{{video.duration_in_sec.toHHMMSS()}}</div>
 <span class="movieTitle">{{video.name}}</span>