import React from 'react'
import styled, { keyframes } from 'styled-components'
const Wrapper = styled.div`
margin: 100px auto;
display: flex;
justify-content: center;
align-items: center;
`
interface IRectangleProps {
delay: number
}
const stretchHeight = keyframes`
0%, 40%, 100% {
transform: scaleY(0.4);
}
20% {
transform: scaleY(1);
}
`
const Rectangle = styled.div`
width: 6px; height: 60px;
background-color: #da0f47;
animation-name: ${stretchHeight};
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 1.2s;
animation-delay: ${(props: IRectangleProps) => props.delay + 's'}
`
function Loading() {
return (
<Wrapper>
<Rectangle delay={0} />
<Rectangle delay={-1.1} />
<Rectangle delay={-1.0} />
<Rectangle delay={-0.9} />
<Rectangle delay={-0.8} />
</Wrapper>
)
}
export default Loading
网友评论