You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
618 B
36 lines
618 B
6 years ago
|
import styled, { keyframes } from 'styled-components'
|
||
|
|
import { Card } from 'rebass'
|
||
|
|
|
||
|
|
const rotate360 = keyframes`
|
||
|
|
from {
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
`
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @render react
|
||
|
|
* @name Spinner
|
||
|
|
* @example
|
||
|
|
* <Spinner />
|
||
|
|
*/
|
||
|
|
const Spinner = styled(Card)`
|
||
|
|
border: 1px solid rgba(235, 184, 100, 0.1);
|
||
|
|
border-left-color: rgba(235, 184, 100, 0.6);
|
||
|
|
display: inline-block;
|
||
|
|
animation: ${rotate360} 1s linear infinite;
|
||
|
|
`
|
||
|
|
|
||
|
|
Spinner.displayName = 'Spinner'
|
||
|
|
Spinner.defaultProps = {
|
||
|
|
borderRadius: 999,
|
||
|
|
width: '1em',
|
||
|
|
css: {
|
||
|
|
height: '1em'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Spinner
|