CSSだけでローディング用のスピナーを実装し、styled-componentsに閉じ込める
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.