From 6c5b4a298b7b93f73ce2ff5be6fdffdce28aeaaf Mon Sep 17 00:00:00 2001
From: Aviral Dasgupta <me@aviraldg.com>
Date: Mon, 28 Mar 2016 19:32:04 +0530
Subject: [PATCH] Prettier, animated placeholder :D

---
 .../structures/RoomStatusBar.css              | 31 +++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css
index 5b6804d7b6..68549cf219 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css
@@ -14,9 +14,36 @@
     text-align: center;
 }
 
-.mx_RoomStatusBar_placeholderIndicator {
-    color: #4a4a4a;
+.mx_RoomStatusBar_placeholderIndicator span {
+    color: #333;
     opacity: 0.5;
+    position: relative;
+    animation-duration: 1s;
+    animation-name: bounce;
+    animation-direction: alternate;
+    animation-iteration-count: infinite;
+}
+
+.mx_RoomStatusBar_placeholderIndicator span:nth-child(1) {
+    animation-delay: 0.3s;
+}
+.mx_RoomStatusBar_placeholderIndicator span:nth-child(2) {
+    animation-delay: 0.6s;
+}
+.mx_RoomStatusBar_placeholderIndicator span:nth-child(3) {
+    animation-delay: 0.9s;
+}
+
+@keyframes bounce {
+    from {
+        opacity: 0.5;
+        top: 0;
+    }
+
+    to {
+        opacity: 1;
+        top: -6px;
+    }
 }
 
 .mx_RoomStatusBar_scrollDownIndicator {