styled-components로 Spinner 만들기 (feat. keyframes helper)

이 포스트는 Udemy 사이트에 올라 온 Tom Phillips의 "React styled-components v5 (2021 edition)" 강의를 듣고 정리한 것입니다.

 

🔗링크

https://www.udemy.com/course/react-styled-components/

React styled components v5 (2021 edition)

 

 

 

🔗 참고

styled-components documentation에서 Animation부분

https://styled-components.com/docs/basics#animations

styled-components: Basics

 

 

 

 

 

 

👩‍💻 전체 코드

import styled, { keyframes } from "styled-components";

const rotation = keyframes`
    from{
        transform: rotate(0deg);
    }

    to{
        transform: rotate(360deg);
    }

`;

const Spinner = styled.div`
	height: 30px;
	width: 30px;
	border: 1px solid #f8049c;
	border-radius: 50%;
	border-top: none;
	border-right: none;
	margin: 16px auto;
	animation: ${rotation} 1s linear infinite;
`;

export { Spinner };

 

 

 

 

 

 

1.

우선 원하는 Spinner components를 만들어준다.

import styled from 'styled-components';

const Spinner = styled.div`
	height: 30px;
	width: 30px;
	border: 1px solid #f8049c;
	border-radius: 50%;
	border-top: none;
	border-right: none;
	margin: 16px auto;
`;

export { Spinner };

 

 

 

2.

styled-components에서 keyframes helper를 import한다.

import styled, { keyframes } from "styled-components";

 

 

 

 

 

3. 

원하는 animation을 만들어준다.

const rotation = keyframes`
    from{
        transform: rotate(0deg);
    }

    to{
        transform: rotate(360deg);
    }

`;

 

 

 

 

4.

Spinner element에 animation을 적용한다.

const Spinner = styled.div`
	height: 30px;
	width: 30px;
	border: 1px solid #f8049c;
	border-radius: 50%;
	border-top: none;
	border-right: none;
	margin: 16px auto;
	animation: ${rotation} 1s linear infinite;
`;

 

 

 

 

 

 

 

👩‍💻 다시 한 번 전체 코드 확인

import styled, { keyframes } from "styled-components";

const rotation = keyframes`
    from{
        transform: rotate(0deg);
    }

    to{
        transform: rotate(360deg);
    }

`;

const Spinner = styled.div`
	height: 30px;
	width: 30px;
	border: 1px solid #f8049c;
	border-radius: 50%;
	border-top: none;
	border-right: none;
	margin: 16px auto;
	animation: ${rotation} 1s linear infinite;
`;

export { Spinner };