In my project using react, I've implemented styled-components for styling. One requirement is to have a shared loading background. Here is the code snippet of how I defined it:
const loadingAnimation = keyframes`
0% {
background-position: 95% 95%;
}
50% {
background-position: 25% 25%;
}
100% {
background-position: 25% 25%;
}
`;
export const LoadingBackgroundStyle = css`
background-image: linear-gradient(
-60deg,
${(props) => props.theme.colors.secondary600},
${(props) => props.theme.colors.secondary600},
${(props) => props.theme.colors.secondary600},
${(props) => props.theme.colors.secondary700},
${(props) => props.theme.colors.secondary600},
${(props) => props.theme.colors.secondary600},
${(props) => props.theme.colors.secondary700}
);
background-size: 400% 400%;
animation: ${loadingAnimation} 1.25s linear infinite;
`;
Then, I use it in the following way:
import styled from "styled-components";
import { LoadingBackgroundStyle } from ".../PerformerInfoCard.styled";
export const SpotifyWrapper = styled.div``;
export const SkeletonPlayer = styled.div`
height: ${(props) => props.$height}px;
width: 100%;
border-radius: ${({ $borderRadius }) => $borderRadius};
${LoadingBackgroundStyle}
`;
`;
However, the background style doesn't show up for some reason. It does show up when I define LoadingBackgroundStyle in the same file as SkeletonPlayer. Can you help me understand what's causing this issue?
I also tried defining the CSS in the same file but that didn't work either.