diff options
author | Kali Kaneko (leap communications) <kali@leap.se> | 2016-09-01 01:44:34 -0400 |
---|---|---|
committer | Kali Kaneko (leap communications) <kali@leap.se> | 2016-09-01 01:44:34 -0400 |
commit | 4728855b40d2d37da8e035c5081fab5819b07fd0 (patch) | |
tree | c8a7c727521fe06a2c4fe9221cb77d30e8f0c3b9 /www/app/components/spinner | |
parent | 4613e74ce4e2c8b125a6a61585a4aec5f5151969 (diff) |
[refactor] move js to top-level folder
Diffstat (limited to 'www/app/components/spinner')
-rw-r--r-- | www/app/components/spinner/index.js | 15 | ||||
-rw-r--r-- | www/app/components/spinner/spinner.css | 26 |
2 files changed, 41 insertions, 0 deletions
diff --git a/www/app/components/spinner/index.js b/www/app/components/spinner/index.js new file mode 100644 index 0000000..ffc3285 --- /dev/null +++ b/www/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/www/app/components/spinner/spinner.css b/www/app/components/spinner/spinner.css new file mode 100644 index 0000000..4e7f3ee --- /dev/null +++ b/www/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); + } +} |