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

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

import styled from "styled-components";
import { getSpinnerWidth } from "./utils";
export const StyledSpinner = styled.span `
    box-sizing: border-box;
    display: block;
    border: ${pr => getSpinnerWidth(pr.size)}px solid transparent;
    border-top: ${pr => getSpinnerWidth(pr.size)}px solid ${pr => pr.light ? '#f7f7f7' : '#3d4ed1'};
    border-right: ${pr => getSpinnerWidth(pr.size)}px solid ${pr => pr.light ? '#f7f7f7' : '#3d4ed1'};
    border-bottom: ${pr => getSpinnerWidth(pr.size)}px solid ${pr => pr.light ? '#f7f7f7' : '#3d4ed1'};
    border-radius: 50%;
    width: ${pr => pr.size}px;
    height: ${pr => pr.size}px;
    animation: spin 1s linear infinite;

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
`;
//# sourceMappingURL=styled.js.map