反応負荷素子(気泡スタイル)の開発

5889 ワード
TIL feature はんのう テキストリンク

ユーザー体験で開発しなければならない構成部品であるロード構成部品をbubbleバージョンに作成してみます.
emotionキーを使用して、ロード中の状態をcssのみで表すように作成しました.
import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';

const bubble = keyframes`
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
`;

const Container = styled.div({
  width: '80px',
  margin: '0 auto',
});

const BoxStyle = styled.div({
  float: 'left',
  width: '30%',
  padding: '5px',
});

const LoadingIcon = styled.div({
  width: '20px',
  height: '20px',
  borderRadius: '100%',
  animation: `${bubble} 3s ease infinite`,
});

export default function Loading() {
  return (
    <>
      <Container>
        <BoxStyle>
          <LoadingIcon />
        </BoxStyle>
        <BoxStyle>
          <LoadingIcon />
        </BoxStyle>
        <BoxStyle>
          <LoadingIcon />
        </BoxStyle>
      </Container>
    </>
  );
}
Git&GitHub Let's get it!
ネットワークストリームをメモリストリームCに変換する方法