summaryrefslogtreecommitdiff
path: root/src/leap/bitmask_js/app/components/spinner
diff options
context:
space:
mode:
authorelijah <elijah@riseup.net>2016-08-26 21:09:53 -0700
committerKali Kaneko (leap communications) <kali@leap.se>2016-09-01 01:41:24 -0400
commit62f069ef0af1444089a4d477f05ac7279897fa32 (patch)
treebde623ee4ec8de240ed5504d3cdbc01c5d6755fc /src/leap/bitmask_js/app/components/spinner
parent50a258d45e851a865801da9d888037b5869a3489 (diff)
[feat] added initial bitmask_js (WIP)
Diffstat (limited to 'src/leap/bitmask_js/app/components/spinner')
-rw-r--r--src/leap/bitmask_js/app/components/spinner/index.js15
-rw-r--r--src/leap/bitmask_js/app/components/spinner/spinner.css26
2 files changed, 41 insertions, 0 deletions
diff --git a/src/leap/bitmask_js/app/components/spinner/index.js b/src/leap/bitmask_js/app/components/spinner/index.js
new file mode 100644
index 00000000..ffc32850
--- /dev/null
+++ b/src/leap/bitmask_js/app/components/spinner/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import './spinner.css';
+
+class Spinner extends React.Component {
+ render() {
+ let props = {}
+ return <div className="spinner">
+ <div className="spin1"></div>
+ <div className="spin2"></div>
+ <div className="spin3"></div>
+ </div>
+ }
+}
+
+export default Spinner \ No newline at end of file
diff --git a/src/leap/bitmask_js/app/components/spinner/spinner.css b/src/leap/bitmask_js/app/components/spinner/spinner.css
new file mode 100644
index 00000000..4e7f3ee8
--- /dev/null
+++ b/src/leap/bitmask_js/app/components/spinner/spinner.css
@@ -0,0 +1,26 @@
+.spinner {
+ height: 18px;
+ display: inline-block;
+}
+
+.spinner > div {
+ width: 18px;
+ height: 18px;
+ background-color: #000;
+ vertical-align: middle;
+ border-radius: 100%;
+ display: inline-block;
+ animation: bouncedelay 1.5s infinite ease-in-out;
+ animation-fill-mode: both;
+}
+
+.spinner .spin1 { animation-delay: -.46s }
+.spinner .spin2 { animation-delay: -.24s }
+
+@keyframes bouncedelay {
+ 0%, 80%, 100% {
+ transform: scale(0.5);
+ } 40% {
+ transform: scale(0.9);
+ }
+}