Skip to content

Instantly share code, notes, and snippets.

@Josscii
Created February 12, 2022 08:05
Show Gist options
  • Save Josscii/bfd01accf47be5ab9ca33c61b24c82a0 to your computer and use it in GitHub Desktop.
Save Josscii/bfd01accf47be5ab9ca33c61b24c82a0 to your computer and use it in GitHub Desktop.
try to create skeleton with styled component
import { FunctionComponent } from "react";
import styled, { keyframes, css } from "styled-components";
const SkeletonLoader: FunctionComponent<{
isLoading?: boolean;
}> = (props) => {
return (
<Content isLoading={props.isLoading}>
{props.isLoading && <Loader />}
{props.children}
</Content>
);
};
const translateX = keyframes`
100% {
transform: translateX(100%);
}
`;
const Loader = styled.div`
position: absolute;
left: 0;
right: 0;
height: 100%;
background-repeat: no-repeat;
background-image: linear-gradient(
90deg,
var(--base-color),
var(--highlight-color),
var(--base-color)
);
transform: translateX(-100%);
animation-name: ${translateX};
animation-direction: var(--animation-direction);
animation-duration: var(--animation-duration);
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
`;
const Content = styled.div<{ isLoading?: boolean }>`
${(props) =>
props.isLoading &&
css`
--base-color: #ebebeb;
--highlight-color: #f5f5f5;
--animation-duration: 1.5s;
--animation-direction: normal;
--pseudo-element-display: block; /* Enable animation */
background-color: var(--base-color);
`}
`;
export default SkeletonLoader;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment