vinyl-component-blocks/lib/components/skeleton/styled.js

Modular, Reusable, and Styled UI Component Library. Stop repeating work, install, call, use, modify.

import styled from "styled-components";
export const StyledSkeleton = styled.div `
    position: relative;
    overflow: hidden;
    width: ${pr => pr.width}px;
    height: ${pr => pr.height}px;
    background-color: #e8e8e8;
    border-radius: ${pr => pr.borderRadius};

    &:before {
        content: '';
        display: block;
        position: absolute;
        left: -${pr => pr.width}px;
        top: 0;
        height: ${pr => pr.height}px;
        width: ${pr => pr.width}px;
        background-color: #cccccc;
        animation: load 1.5s cubic-bezier(0.4, 0.0, 0.2, 1);
        animation-iteration-count: infinite;
    }

    @keyframes load {
        from {
            left: -${pr => pr.width}px;
        }
        to {
            left: 100%;
        }
    }
`;
//# sourceMappingURL=styled.js.map