/react-loading-dot

🔮 A react loading animation component

Primary LanguageTypeScript

react-feedback-modal

A simple and beautiful react loading animation. Using for page pre-loading, content loading or transition!

NPM JavaScript Style Guide

Install

npm install react-loading-dot

If you are using yarn

yarn add react-loading-dot

Import

import { Loading } from 'react-loading-dot'

Properties

Properties Default Description Type
dots 3 Number of dots displayed number
size 1.5rem The width and height of each dot string
margin 1rem The horizontal distance between each dot string
background rgb(202,57,57) The color of the dot string
duration 0.8s The duration of the animation string

Usage

import React, { useState } from 'react'
import { Loading } from 'react-loading-dot'

export const App: React.FC = () => {
  const [loading, setLoading] = useState < boolean > true

  return (
    <div>{loading ? <Loading /> : <div>Display some contents...</div>}</div>
  )
}

Uninstall

In your project directory, run

npm uninstall react-loading-dot

If you are using yarn

yarn remove react-loading-dot

ChangeLog

  • 2020/06/27 version 1.0.2 publish

License

MIT © yang052513