CSS를 활용한 3가지 스타일의 Loading Screen 구현 💬

CSS

CSS를 활용한 3가지 스타일의 Loading Screen 구현 💬 - with 애니메이션, React 💙

ANG DEV 2021. 7. 17. 20:18

React, css, javascript를 활용한 간단한 로딩 스크린 애니메이션

- 한번 알아두면 평생 써먹는, 사용자에게 더욱 친화적 환경 제공을 위한 프로젝트 속 필수 코드 ! 😋

[ 활용 프로젝트 ]

1. Feed Loading 화면 구현

| 구현 단계 및 실제 코드

단계 ( skeleton : 골격, 해골의 의미 )

skeleton 컴포넌트 생성
( vscode에서 단축키 사용해 rafce - const 리액트 함수 또는 rfce - fcuntion 리액트 함수 생성 )
component 내부 함수에 실제 구조를 div 태그 이용해 만들고 나머지는 css에서 끝낸다

rafce 사용한 경우 [ const 함수 ]

export default function skeleton({ type }) {
    const COUNTER = 8;
    const FeedSkeleton = () => (
        <div className={styles.skeleton}>
            <div className={styles.Img}></div>
            <div className={styles.Info}>
                <div className={styles.Avatar}></div>
                <div className={styles.Detail}>
                    <div className={styles.Text}></div>
                    <div className={styles.Text_sm}></div>
                </div>
            </div>
        </div>
    )

   
    if (type == "feed") return Array(8).fill(<FeedSkeleton />);
  
}

rfce 사용한 경우 [ function 내부에 const 함수 ]

import React from 'react'

function Skeleton({ type }) {
    const COUNTER = 8;
    const FeedSkeleton = () => (
        <div className={styles.skeleton}>
            <div className={styles.Img}></div>
            <div className={styles.Info}>
                <div className={styles.Avatar}></div>
                <div className={styles.Detail}>
                    <div className={styles.Text}></div>
                    <div className={styles.Text_sm}></div>
                </div>
            </div>
        </div>
    )

    
    if (type == "feed") return Array(COUNTER).fill(<FeedSkeleton />);
    // 전달 받은 type 별로 다양한 loading 화면 리턴이 가능하도록 하나의 컴포넌트에서 마무리
}

export default Skeleton;

CSS 코드

background-color: #313131;
animation: skeleton 1s ease infinite alternate;
@keyframes skeleton {
  to {
    opacity: 0.5;
  }
}

2. Three balls Loading 화면

CSS 코드

.ball1{
	animation: ball 0.5s ease infinite alternate;
}
.ball2 {
  animation-delay: 0.1s;
}
.ball3 {
  animation-delay: 0.2s;
}
@keyframes ball {
  to {
    transform: translateY(-10px);
  }
}

3. circle Loading Screen - 2 ways

CSS 코드
1 ) 순수 js 활용한 방법

> js 코드 부분
const [loading, setLoading] = useState(false);
loading && <div className={styles.loading}></div>

> css 코드
.loading {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  border: 3px solid makerLightGrey;
  border-top: 3px solid makerPink;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

2 ) Material icons 이용한 방법

import React from 'react'
import { CircularProgress } from '@material-ui/core';

function skeleton({ type }) {
    const Circle = () => (
        <div className={styles.circle}>
            <CircularProgress />
        </div>
    )

    if (type == "circle") return (<Circle />);
}
export default skeleton;

3 ) react-rainbow-components 라이브러리 사용

import { Spinner } from "react-rainbow-components";

const Loader = ({ text }) => (
  <div>
    <Spinner size="large" />
    <h1>{text}</h1>
  </div>
);

export default Loader;

{변수 === 조건 && <Loader text="now is Loading . . ." />}