프론트엔드 개발자 엄성준 블로그

  • 홈
  • 태그

Loding Bar 1

기존의 Loding Bar -> Skeleton UI 교체

기존의 Loding bar로 표현되었던 걸 Skeleton UI를 직접 구현하여서 교체하였다. 교체 한 이유는 기존의 Loading Bar보다 사용자에게 좀 더 자연스러운 UI를 보여주고 싶어서입니다. 아래는 제가 직접 구현 한 코드입니다. {Array.from({ length: 6 }).map((_, index) => { return ( ); })} const loading = keyframes`{ 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }`; const Container = styled.div` padding-top: 27rem; width: 100%; display: flex; justify-content: center; `; ..

지식 정리 📝 2023.11.20
이전
1
다음
더보기
프로필사진

꾸준함을 강점으로 삼고 있는 프론트엔드 개발자 엄성준 블로그입니다.

  • 카테고리 📂 (382) N
    • 코딩 테스트 풀이 🛠 (232)
    • 지식 정리 📝 (78) N
    • zero-base 프론트엔드 스쿨 ⛪️ (20)
    • 3월 협업 프로젝트(1석 4조) 👨‍👩‍👧‍👦 (19)

Tag

next.js, react, 엄성준, join(), 프론트엔드, 프론트엔드 개발자, String(), 프론트엔드 개발자 엄성준, split(), 제로베이스 프론트엔드 스쿨, indexOf(), sort(), 프론트엔드 스쿨, Number(), 프로그래머스, 제로베이스, 오토위니, exceljs, autowini, forEach(),

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

방문자수Total

  • Today :
  • Yesterday :

꾸준함이 강점이자 자랑인 프론트엔드 개발자 엄성준 입니다.

  • Github
  • 📷 Instar
  • 🎨Portfolio

티스토리툴바