From 12b6877aeb0a6bcddab4193b62cd10347b8c328b Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 18 Oct 2018 13:31:11 -0700
Subject: Pulsating holder element showing, even if amount is empty

---
 packages/instant/src/components/animations/pulse.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 packages/instant/src/components/animations/pulse.tsx

(limited to 'packages/instant/src/components/animations/pulse.tsx')

diff --git a/packages/instant/src/components/animations/pulse.tsx b/packages/instant/src/components/animations/pulse.tsx
new file mode 100644
index 000000000..01d6ea070
--- /dev/null
+++ b/packages/instant/src/components/animations/pulse.tsx
@@ -0,0 +1,15 @@
+import { keyframes, styled } from '../../style/theme';
+
+const pulsingKeyframes = keyframes`
+    0%, 100% {
+        opacity: 0.2;
+    }
+    50% {
+        opacity: 100;
+    }
+`;
+export const Pulse = styled.div`
+    animation-name: ${pulsingKeyframes}
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+`;
-- 
cgit v1.2.3

