added loading animation

templates/medium.cassius

@@ -18,3 +18,62 @@ div #main
 
 #footer
   position: static !important
+
+#loadcontent
+  display: none
+
+#loader
+  height: 125px
+  text-align: center
+
+#loader span
+  display: inline-block
+  vertical-align: middle
+  width: 1em
+  height: 1em
+  margin: 50px auto
+  background: #000066
+  border-radius: 0.5em
+  -webkit-animation: loading 1s infinite alternate
+  -moz-animation: loading 1s infinite alternate
+  box-shadow: 1px 1px 1px #444444
+
+#loader span:nth-of-type(2)
+  background: #3333FF
+  -webkit-animation-delay: 0.2s
+  -moz-animation-delay: 0.2s
+
+#loader span:nth-of-type(3)
+  background: #3366FF
+  -webkit-animation-delay: 0.4s
+  -moz-animation-delay: 0.4s
+
+#loader span:nth-of-type(4)
+  background: #6699FF
+  -webkit-animation-delay: 0.6s
+  -moz-animation-delay: 0.6s
+
+#loader span:nth-of-type(5)
+  background: #99CCFF
+  -webkit-animation-delay: 0.8s
+  -moz-animation-delay: 0.8s
+
+@-webkit-keyframes loading
+  0%
+    width: 10px
+    height: 10px
+    -webkit-transform: translateZ(0)
+  100%
+    width: 24px
+    height: 24px
+    -webkit-transform: translateZ(-21px)
+
+@-moz-keyframes loading
+  0%
+    width: 10px
+    height: 10px
+    -moz-transform: translateZ(0)
+  100%
+    width: 24px
+    height: 24px
+    -moz-transform: translateZ(-21px)

templates/medium.hamlet

@@ -6,7 +6,13 @@
         by <a href=@{UserR ownerName}>#{ownerName}</a> from album <a href=@{AlbumR albumId}>#{albumTitle album}</a>
   <div id="header" class="item image" data-width=#{dataWidth}>
     <div class="inner">
-      <img src=@{StaticR $ StaticRoute (drop 2 $ map T.pack $ splitDirectories $ mediumPath medium) []} title=#{mediumTitle medium}>
+      <img #loadcontent src=@{StaticR $ StaticRoute (drop 2 $ map T.pack $ splitDirectories $ mediumPath medium) []} title=#{mediumTitle medium} style="display: none;">
+      <div #loader data-width=#{dataWidth}>
+        <span>
+        <span>
+        <span>
+        <span>
+        <span>
 
   <div id="header" class="item" data-width="400">
     <div class="inner">

templates/medium.julius

@@ -0,0 +1,4 @@
+window.onload = function() {
+  document.getElementById("loader").style.display = "none";
+  document.getElementById("loadcontent").style.display = "block";
+}