From 025620e97c43f40fa351e8c50208b39bbcc96864 Mon Sep 17 00:00:00 2001
From: nek0 <nek0@chelnok.de>
Date: Sat, 26 Sep 2015 00:52:39 +0200
Subject: [PATCH] added loading animation

---
 templates/medium.cassius | 59 ++++++++++++++++++++++++++++++++++++++++
 templates/medium.hamlet  |  8 +++++-
 templates/medium.julius  |  4 +++
 3 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 templates/medium.julius

diff --git a/templates/medium.cassius b/templates/medium.cassius
index 68199ff..60a9814 100644
--- a/templates/medium.cassius
+++ b/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)
diff --git a/templates/medium.hamlet b/templates/medium.hamlet
index 8678510..eb0caf1 100644
--- a/templates/medium.hamlet
+++ b/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">
diff --git a/templates/medium.julius b/templates/medium.julius
new file mode 100644
index 0000000..4032eeb
--- /dev/null
+++ b/templates/medium.julius
@@ -0,0 +1,4 @@
+window.onload = function() {
+  document.getElementById("loader").style.display = "none";
+  document.getElementById("loadcontent").style.display = "block";
+}