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; |