로딩 스피너

간단한 Loading 스피너 컴포넌트 코드입니다

import React from "react";
import styled from "styled-components";
import { flexCenter, color } from "./utils/theme";

const LoadingSection = styled.div`
    ${flexCenter}

    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    margin-top: -32px;
    margin-left: -32px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: ${color.white};
    border-bottom-color: ${color.point};
    animation: loading 0.8s ease infinite;

    @keyframes loading {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
`;

const Loading = () => {
    return <LoadingSection />;
};

export default Loading;