diff options
author | elijah <elijah@riseup.net> | 2016-09-16 14:02:32 -0700 |
---|---|---|
committer | Kali Kaneko (leap communications) <kali@leap.se> | 2016-09-22 11:40:11 -0400 |
commit | 073393af311d36c8ca7570ff0d3f0a3117c0b544 (patch) | |
tree | e59286ac350ba17110392f53b6e48bcedfd12ef1 /ui/app/components/spinner | |
parent | ae5a20d059209f2027c05820dc3b4cfe7346c8a8 (diff) |
[pkg] rename www to ui
Diffstat (limited to 'ui/app/components/spinner')
-rw-r--r-- | ui/app/components/spinner/index.js | 15 | ||||
-rw-r--r-- | ui/app/components/spinner/spinner.css | 42 |
2 files changed, 57 insertions, 0 deletions
diff --git a/ui/app/components/spinner/index.js b/ui/app/components/spinner/index.js new file mode 100644 index 0000000..ffc3285 --- /dev/null +++ b/ui/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/ui/app/components/spinner/spinner.css b/ui/app/components/spinner/spinner.css new file mode 100644 index 0000000..5e8535c --- /dev/null +++ b/ui/app/components/spinner/spinner.css @@ -0,0 +1,42 @@ +.spinner { + height: 18px; + display: inline-block; +} + +.spinner > div { + width: 18px; + height: 18px; + background-color: #000; + vertical-align: middle; + border-radius: 100%; + display: inline-block; + -webkit-animation: bouncedelay 1.5s infinite ease-in-out; + animation: bouncedelay 1.5s infinite ease-in-out; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.spinner .spin1 { + -webkit-animation-delay: -.46s; + animation-delay: -.46s; +} +.spinner .spin2 { + -webkit-animation-delay: -.24s; + animation-delay: -.24s; +} + +@-webkit-keyframes bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0.5); + } 40% { + -webkit-transform: scale(0.9); + } +} + +@keyframes bouncedelay { + 0%, 80%, 100% { + transform: scale(0.5); + } 40% { + transform: scale(0.9); + } +} |