const PulseContainer = styled.div`
width: 470px;
justify-content: space-between;
display: flex;
`
var dots = [
{
bg: '#33ffbb',
anim: ['rgba(26, 255, 179, 0)', '#1affb3'],
redBg: '#ff3333',
redAnim: ['#ff1a1a', 'rgba(255, 26, 26, 0)']
},
{
bg: '#33ffdd',
anim: ['rgba(26, 255, 217, 0)', '#1affd9'],
redBg: '#ff4733',
redAnim: ['#ff301a', 'rgba(255, 48, 26, 0)']
},
{
bg: '#33ffff',
anim: ['rgba(26, 255, 255, 0)', '#1affff'],
redBg: '#ff5c33',
redAnim: ['#ff471a', 'rgba(255, 71, 26, 0)']
},
{
bg: '#33ddff',
anim: ['rgba(26, 217, 255, 0)', '#1ad9ff'],
redBg: '#ff7033',
redAnim: ['#ff5e1a', 'rgba(255, 94, 26, 0)']
},
{
bg: '#33bbff',
anim: ['rgba(26, 179, 255, 0)', '#1ab3ff'],
redBg: '#ff8533',
redAnim: ['#ff751a', 'rgba(255, 117, 26, 0)']
},
{
bg: '#3399ff',
anim: ['rgba(26, 140, 255, 0)', '#1a8cff'],
redBg: '#ff9933',
redAnim: ['#ff8c1a', 'rgba(255, 140, 26, 0)']
}
]
var pulse = ([ from, to ]) => keyframes`
0% { box-shadow: 0 0 8px 6px ${from}, 0 0 0px 0px #333, 0 0 0px 0px ${from}; }
10% { box-shadow: 0 0 8px 6px ${to}, 0 0 12px 10px #333, 0 0 12px 14px ${to}; }
100% { box-shadow: 0 0 8px 6px ${from}, 0 0 0px 40px #333, 0 0 0px 40px ${from}; }
`
var redPulse = ([ from, to ]) => keyframes`
from { box-shadow: 0 0 8px 6px ${from}, 0 0 12px 10px #333, 0 0 12px 14px ${from}; }
to { box-shadow: 0 0 8px 6px ${to}, 0 0 4px 40px #333, 0 0 4px 41px ${to}; }
`
const Dot = styled.div`
width: 20px;
height: 20px;
border-radius: 50%;
cursor: pointer;
float: left;
transition: all 0.2s;
${dots.map(({ bg, anim, redBg, redAnim }, i) => css`
&:nth-child(${i + 1}) {
background: ${bg};
animation: ${pulse(anim)} 2s ${i * .25}s ease-out infinite;
&:hover {
background: ${redBg};
animation: ${redPulse(redAnim)} 0.5s 0.4s ease-out infinite;
}
}
`)}
`
const SmoothPulse = () => (
<PulseContainer>
{Array.from({ length: 6 }, (_, i) => (
<Dot key={i} />
))}
</PulseContainer>
)
render(
<Container bg='#333'>
<SmoothPulse />
</Container>
)