Can't to agrupate animations by element for grid responsive.

[Eriold]

I want to make the wrapped elements into divs so I can control them over a responsive CSS grid (With styled-component) for differents screens, but the animation is separate.

I made each component adjusted to the container div and already on a parent (Grid) I control the distribution on the screen.

What I can't unify the animation of each element as one when assembling them.

Any ideas to do it?

Example component.

CircleSkeleton

export const CircleSkeleton = (props) => {
  return (
    <div>
      <ContentLoader
        speed={2}
        width="100%"
        height="100%"
        viewBox="0 0 200 200"
        backgroundColor="#D9D9D9"
        foregroundColor="#F9F9F9"
        {...props}>
        <circle x="0" cx="50%" cy="50%" r="50%" />
      </ContentLoader>
    </div>
  )
}

BarSkeleton

export const BarSkeleton = (props) => {
  return (
    <div>
      <ContentLoader
        speed={2}
        width="100%"
        height="100%"
        backgroundColor="#D9D9D9"
        foregroundColor="#F9F9F9"
        {...props}>
        <rect x="0" y="25%" rx="8" ry="8" width="100%" height="50%" preserveAspectRatio="none" />
      </ContentLoader>
    </div>
  )
}

Combiner like BarElementSkeleton

const BarElementSkeleton = () => (
  <GlobalGrid>
    <div className="bar__unit-skeleton">
      <CircleSkeleton /> // Animate separate
      <BarSkeleton /> // Animate separate
    </div>
    <hr />
  </GlogalGrid>
)

Remember: The idea es unify the Animate separate. This method is for use grid responsive in my all (GlobalGrid)