Tailwindcss Bouncing Ball Preloader
로딩 애니메이션을 찾아다니다가 통통 튀는 공모양 preloader를 발견했는데, 가장 심플하고 재미있어서 tailwindcss로 비슷하게 만들어보았다.
- 공 모양 만들기
w-4h-4rounded-full: 너비, 높이 16px의 원 모양을 만든다.
<div className="absolute w-4 h-4 rounded-full bg-yellow-400 animate-bigBounce" />- 통통 튀는 bounce 애니메이션 만들기
animate-bigBounce: bitBounce라는 커스텀 애니메이션을 만든다.- keyframes 설정
0% : 공이 바닥에 떨어졌을 때,
border-radius: 60px 60px 20px 20px; , transform: scaleX(2); height: 5px; css 속성을 적용해서 찌그러진 공모양을 만들어준다.
35%: 공이 바닥에서 35% 정도 올라갈 때,
border-radius: 50%; , transform: scaleX(1) css 속성을 이용해서 동그란 공모양을 만들어준다.
100%: 공이 바닥에서 100% 높이로 올라갈 때, top: 0 으로 공 위치를 잡아준다.
// tailwind.config.js
theme: {
extend: {
...,
animation: {
bigBounce: 'bigBounce 500ms alternate infinite ease',
},
keyframes: {
bigBounce: {
'0%': {
top: '30px',
height: '5px',
borderRadius: '60px 60px 20px 20px',
transform: 'scaleX(2)',
},
'35%': {
height: '16px',
borderRadius: '50%',
transform: 'scaleX(1)',
},
'100%': {
top: '0',
},
},
},
}
}완성 ✨
<div className="relative h-20 py-5">
<div className="absolute w-4 h-4 rounded-full bg-yellow-400 animate-bigBounce" />
<div className="text-yellow-400 text-lg font-light align-text-top ml-8 tracking-widest">
NOW LOADING
</div>
</div>