Next.jsでLoading時に使える関数コンポーネントを作る（SVG編） 🔨

以前はCSSアニメーションでさささっとローディングを作っていましたが、SVGアニメーションバージョンもさささっと作ってみました。

現状はstyled-componentsで作っていますが、そのうちCSS Modulesで作り直した方が使い勝手が上がりそうです。

ソースコード

Loading.tsx

import styled from 'styled-components';

export function Loading() {
  return (
    <Wrapper className="loading">
      <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle opacity="0.5" cx="12.5" cy="12" r="10" stroke="white" strokeWidth="4"/>
        <path d="M22.5 12C22.5 6.47715 18.0228 2 12.5 2" stroke="white" strokeWidth="4" strokeLinecap="round">
          <animateTransform
            attributeName="transform"
            type="rotate"
            repeatCount="indefinite"
            dur=".8s"
            from="0 12 12"
            to="360 12 12"
          />
        </path>
      </svg>
    </Wrapper>
  );
}

const Wrapper = styled.div`
  svg {
    transform: scale(2);
  }

  circle {
    stroke: #757E88;
  }

  path {
    stroke: #E5E7EB;
  }
`;