diff --git a/src/components/Loading.module.css b/src/components/Loading.module.css index 559fcd2..a59b7dd 100644 --- a/src/components/Loading.module.css +++ b/src/components/Loading.module.css @@ -6,23 +6,23 @@ align-items: center; } -.pulse { - --color1: #dddddd; - --size: 40px; - width: var(--size); - height: var(--size); - margin: 10px; - background-color: var(--color1); - border-radius: 100%; - animation: pulseScaleOut 1s infinite ease-in-out; +.spinner { + width: 20px; + height: 20px; + display: inline-block; + vertical-align: middle; + animation: rotate 1s steps(12, end) infinite; + background: transparent + url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E") + no-repeat; + background-size: 100%; } -@keyframes pulseScaleOut { +@keyframes rotate { 0% { - transform: scale(0); + transform: rotate3d(0, 0, 1, 0deg); } 100% { - transform: scale(1); - opacity: 0; + transform: rotate3d(0, 0, 1, 360deg); } } diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx index 2db01da..208c4af 100644 --- a/src/components/Loading.tsx +++ b/src/components/Loading.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import s0 from './Loading.module.css'; +import s from './Loading.module.css'; type Props = { height?: string; @@ -9,8 +9,8 @@ type Props = { const Loading = ({ height }: Props) => { const style = height ? { height } : {}; return ( -