反応をロードするアニメーション.スタイルのコンポーネント

そこで、ここでは別のポストを使用しています.今日は、スタイルのコンポーネントを使用したアプリケーションのローディングアニメーションを作成する方法を示します.だから右にジャンプしましょう!


反応アプリの作成
1 -まず第一に、我々は反応して、スタイル化されたコンポーネントをインストールするプロジェクトを作成するつもりです.

# Comand to create a react app
yarn create react-app my-app
# Go to the folder you created
## And then install styled-components
yarn add styled-components

2 - 2番目のすべてのローディングコンポーネントを作成し、2スタイルの要素を作る、loadingwrapperとドット.
(コンポーネントのフォルダを作成し、2つのファイルを論理ファイルとスタイルファイルで作成します.

import { Dot, LoadingWrapper } from './styles'

export default function Loading() {
  return (
    <LoadingWrapper>
      <h3>Loading</h3>
      <Dot />
      <Dot />
      <Dot />
    </LoadingWrapper>
  )
}

3 -たった今、私たちは荷物の部品を得たので、我々が使用しているつもりであるスタイルに行って、それから我々のファイルに輸入しましょう.

import styled from 'styled-components'

export const LoadingWrapper = styled.div`
  display: flex;
  align-items: flex-end;
  justify-content: center;
`

export const Dot = styled.div`
  background-color: black;
  border-radius: 50%;
  width: 0.75rem;
  height: 0.75rem;
  margin: 0 0.25rem;
`

4 -私たちは今まで、ちょうど単語“側に3点で”ロードしている.今、我々はアニメーションそのものを作るつもりです.(ローディングコンポーネントのスタイルの同じファイルにアニメーションを作成したり、ファイルを分離したりできます)

export const BounceAnimation = keyframes`
  0% { 
    margin-bottom: 0; 
  }

  50% { 
    margin-bottom: 1rem;
  }

  100% { 
    margin-bottom: 0;
  }
`

5 -手でアニメーションを使用すると、ローディングスタイルに追加する必要があり、スタイルのコンポーネントとかなりクールなものを作ることができますし、コンポーネントに小道具を渡している.それでは行きましょう.

// If you made the animation in a different folder
// you need to import it
import { BounceAnimation } from ''

export const Dot = styled.div`
  background-color: black;
  border-radius: 50%;
  width: 0.75rem;
  height: 0.75rem;
  margin: 0 0.25rem;
  /*Animation*/
  animation: ${BounceAnimation} 0.5s linear infinite;
  animation-delay: ${(props) => props.delay};
`

6 -そして最後に、しかし、少なくとも遅れプロップをローディング・フォルダーのドット・コンポーネントに加えてください.

import { Dot, LoadingWrapper } from './styles'

export default function Loading() {
  return (
    <LoadingWrapper>
      <h3>Loading</h3>
      <Dot delay="0s" />
      <Dot delay="0.1s" />
      <Dot delay="0.2s" />
    </LoadingWrapper>
  )
}

多田🎉 このようにアニメーションの読み込みコンポーネントがあります.

私のものは少し異なります、しかし、アニメーションはそれのようです
現在、私は去ります..

そして、あなたはあなたのアプリケーションを介して使用して、それに夢中になるアニメーションローディングコンポーネントを持っている場合は、私もそれについての別のポストを作ることができますしたい場合は、TheesScriptでこれを使用することができます、次の時間、平和を参照してください!