john/deighton-ar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Manually place user location on main map

Browse Source
This commit is contained in:
John Lyon-Smith
2018-06-27 22:34:21 -07:00
parent e60801ec3e
commit 6f0423bb46
14 changed files with 97 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
website/src/ui/Loader.js
View File

@@ -1,7 +1,7 @@
import React from 'react'
import Radium from 'radium'
import { colorInfo, sizeInfo } from 'ui/style'
import anime from 'animejs'
import React from "react"
import Radium from "radium"
import { colorInfo, sizeInfo } from "ui/style"
import anime from "animejs"
@Radium
export class Loader extends React.Component {
@@ -13,30 +13,31 @@ export class Loader extends React.Component {
anime({
targets: elem,
scale: [
{ value: 0.2, duration: 800, easing: 'easeOutSine', delay: 200 * i },
{ value: 1.0, duration: 800, easing: 'easeOutSine' },
{ value: 1.0, duration: 200 * (2 - i) }
{ value: 0.0, duration: 800, easing: "easeOutSine", delay: 200 * i },
{ value: 1.0, duration: 800, easing: "easeOutSine" },
{ value: 1.0, duration: 200 * (2 - i) },
],
loop: true
loop: true,
})
}
return (
<div style={{ height: size }}>
{
[0, 1, 2].map((i) => (
<span key={i} ref={(elem) => addAnimation(elem, i)}
style={{
display: 'inline-block',
marginLeft: i > 0 ? spacing : 0,
width: size,
height: size,
background: colorInfo.textInverse,
borderSize: 0,
borderRadius: '100%'
}} />
))
}
{[0, 1, 2].map((i) => (
<span
key={i}
ref={(elem) => addAnimation(elem, i)}
style={{
display: "inline-block",
marginLeft: i > 0 ? spacing : 0,
width: size,
height: size,
background: colorInfo.textInverse,
borderSize: 0,
borderRadius: "100%",
}}
/>
))}
</div>
)
}