CSSだけでローディング用のスピナーを実装し、styled-componentsに閉じ込める

yaruzou.net

CSSについては上記を丸々参考にしている。

これをstyled-componentsを使ってReactコンポーネント化する。

import styled from 'styled-components'

const Loading = styled.div`
  opacity: 0.7;
  width: 100%;
  height: 100%;
`

const LoadingSpinner = styled.div`
  display: inline-block;
  position: relative;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  width: 50px;
  height: 50px;
  border: 6px solid rgba(200, 200, 200, 0.4);
  border-top-color: rgba(200, 200, 200, 0.9);
  border-radius: 50%;
  animation: spin 1.2s linear 0s infinite;
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
`

JSXで利用する際は下記のように呼び出す。

<Loading>
  <LoadingSpinner />
</Loading>

CodePen

See the Pen YbMYgG by dyoshikawa (@dyoshikawa) on CodePen.