Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 1x 1x 1x 1x 1x | import React,{Component} from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
class CircleBlink extends Component {
constructor(props, context) {
super(props, context);
this.state = {
weight: this.props.weight || '30',
color: this.props.color || 'orange',
}
}
render(){
let Blink = styled.span`
background-color: ${this.state.color};
width: ${this.state.weight}px;
height: ${this.state.weight}px;
display:inline-block;
animation: blink 1s infinite;
border-radius: 50%;
@keyframes blink{
0% {
transform: scale(1);
opacity: .25;
}
50%{
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1);
opacity: .25;
}
}
`;
return (
<Blink/>
)
}
}
CircleBlink.propTypes = {
weight: PropTypes.string,
color: PropTypes.string
};
export default CircleBlink;
|