All Projects โ†’ Summer-andy โ†’ React Loading

Summer-andy / React Loading

Licence: mit
Build a smooth and lightweight react component loading with css ๐ŸŽ‰ .

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Loading

Gatsby Starter Typescript Deluxe
A Gatsby starter with TypeScript, Storybook, Styled Components, Framer Motion, Jest, and more.
Stars: โœญ 50 (-78.63%)
Mutual labels:  styled-components, storybook
Styled Typography
Typograpy components for react and styled-components
Stars: โœญ 113 (-51.71%)
Mutual labels:  component, styled-components
French Press Editor
โ˜• An offline-first rich text editor component.
Stars: โœญ 69 (-70.51%)
Mutual labels:  component, styled-components
Orbit
React components of open-source Orbit design system by Kiwi.com
Stars: โœญ 774 (+230.77%)
Mutual labels:  component, styled-components
Storybook Addon Styled Component Theme
storybook addon
Stars: โœญ 168 (-28.21%)
Mutual labels:  styled-components, storybook
Quantum
The default pack of components and layout principles that dictates Catho Frontend applications.
Stars: โœญ 39 (-83.33%)
Mutual labels:  styled-components, storybook
Meteor Apollo Starter Kit
Meteor, Apollo, React, PWA, Styled-Components boilerplate
Stars: โœญ 91 (-61.11%)
Mutual labels:  styled-components, storybook
weather-styled-icon
โ›…๏ธโ˜€๏ธ๐ŸŒง๐ŸŒจin โš›๏ธ
Stars: โœญ 23 (-90.17%)
Mutual labels:  styled-components, storybook
Storybook Addon
Develop themable components with Emotion/Styled Components/Material-UI with help of Storybook & React Theming
Stars: โœญ 122 (-47.86%)
Mutual labels:  styled-components, storybook
React95
A React components library with Win95 UI
Stars: โœญ 1,779 (+660.26%)
Mutual labels:  styled-components, storybook
React Component Library
A project skeleton to get your very own React Component Library up and running using Rollup, Typescript, SASS + Storybook
Stars: โœญ 313 (+33.76%)
Mutual labels:  component, storybook
Lerna Yarn Workspaces Monorepo
๐Ÿ‰ A Monorepo with multiple packages and a shared build, test, and release process.
Stars: โœญ 201 (-14.1%)
Mutual labels:  styled-components, storybook
eleventy-react
Use React components in Eleventy.
Stars: โœญ 66 (-71.79%)
Mutual labels:  styled-components, storybook
Moveit
๐Ÿš€ NLW #4 | React+ TypeScript + NextJS + StyledComponents + Firebase + MongoDb +Axios
Stars: โœญ 39 (-83.33%)
Mutual labels:  styled-components, storybook
personal-blog
โœ๏ธ ไธชไบบๆŠ€ๆœฏๅšๅฎข
Stars: โœญ 79 (-66.24%)
Mutual labels:  styled-components, storybook
Percy Storybook
Percy's Storybook SDK.
Stars: โœญ 80 (-65.81%)
Mutual labels:  component, storybook
storybook-styled-components
No description or website provided.
Stars: โœญ 76 (-67.52%)
Mutual labels:  styled-components, storybook
chic-ui
Lightweight CSS-in-JS styled UI Component Library for React
Stars: โœญ 39 (-83.33%)
Mutual labels:  styled-components, storybook
Aura.ui
A Library with a lot of Controls for AvaloniaUI
Stars: โœญ 114 (-51.28%)
Mutual labels:  component, styled-components
2019 12
๐ŸŽŸ ๊ธ‰์ฆํ•˜๋Š” ํŠธ๋ž˜ํ”ฝ์—๋„ ์•ˆ์ •์ ์ธ ์˜ˆ์•ฝ ์„œ๋น„์Šค, Atomic Pattern์„ ์ ์šฉํ•œ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ปดํฌ๋„ŒํŠธ, ์‹ค์šฉ์ ์ธ Testing์„ ์ฃผ์ œ๋กœ ํ•˜๋Š” ์ด๋ฒคํŠธ ์„œ๋น„์Šค
Stars: โœญ 169 (-27.78%)
Mutual labels:  styled-components, storybook

A React-based Loading animation component library

Introduction

React-Loading is a React-based Loading animation component library includes many exquisite and beautiful loading components. It will effectively relieve the user's anxiety when you give loading dynamics tips at the appropriate place and moment in your project. This component library supports on-demand loading, so pick a favorite Loading component now to enrich your project ~

๐ŸŽ‰ check demo

Warning

After version 1.7.4-alpha.2, the project was refactored with typescript.

Quick Start

๐Ÿ›  Install

npm install react-loadingg

๐Ÿ“ฆ Use

import { BoxLoading } from 'react-loadingg';

<BoxLoading />;

Components related

๐Ÿ“• API

Parameter Description Type Default
color Set color, support hexadecimal and RGB string '#00adb5'
speed Set animation speed number(s) -
size Set the component size, the optional value is small default large string 'default'
style Style the component Object -

๐Ÿ“ Components list

components color speed size style
BabelLoading โœ… โœ… โœ… โœ…
BlockLoading โœ… โœ… โœ… โœ…
BlockReserveLoading โœ… โœ… โœ… โœ…
BoxLoading โœ… โœ… โœ… โœ…
CircleLoading โœ… โœ… โœ… โœ…
CircleToBlockLoading โœ… โœ… โœ… โœ…
CommonLoading โœ… โœ… โœ… โœ…
DisappearedLoading โœ… โœ… โœ… โœ…
LoopCircleLoading โœ… โœ… โœ… โœ…
NineCellLoading โœ… โœ… โœ… โœ…
TouchBallLoading โœ… โœ… โœ… โœ…
TransverseLoading โœ… โœ… โœ… โœ…
WaveLoading โœ… โœ… โœ… โœ…
WaveTopBottomLoading โœ… โœ… โœ… โœ…
WindMillLoading โœ… โœ… โœ… โœ…
JumpCircleLoading โœ… โœ… โœ… โœ…
MeteorRainLoading โœ… โœ… โœ… โœ…
RotateCircleLoading โœ… โœ… โœ… โœ…
StickyBallLoading โœ… โœ… โœ… โœ…
SemipolarLoading โœ… โœ… โœ… โœ…
SolarSystemLoading โœ… โœ… โœ… โœ…
LadderLoading โœ… โœ… โœ… โœ…
HeartBoomLoading โœ… โœ… โœ… โœ…
RollBoxLoading โœ… โœ… โœ… โœ…
RectGraduallyShowLoading โœ… โœ… โœ… โœ…
PointSpreadLoading โœ… โœ… โœ… โœ…
ThreeHorseLoading โœ… โœ… โœ… โœ…
PassThrouthLoading โœ… โœ… โœ… โœ…
CoffeeLoading โœ… โœ… โœ… โœ…
BatteryLoading โœ… โœ… โœ… โœ…
DiamonLoading โœ… โœ… ๐Ÿ”จ โœ…
EatLoading โœ… โœ… ๐Ÿ”จ โœ…

โŒจ๏ธ Participate in development

Running the project for the first time

$ git clone https://github.com/sixiaodong123/react-loading
$ npm run dev

P.S.: If startup fails, please installyarnfirst

npm install -g yarn

Running the project for the second time

npm run storybook

๐Ÿ”จ Component packaging

$ npm run build

๐ŸŽ‰ Component release

$ npm run release

๐Ÿค Component submission specifications

  • perf: optimization related, such as improving performance and experience
  • feat: new feature
  • fix: fix bug
  • docs: add or change documentation
  • style: format (changes that do not affect code execution)
  • refactor: refactoring (neither new features nor code changes that modify bugs)
  • test: add tests
  • chore: changes in the build process or aids
  • upgrade: third-party library upgrades
  • revert: rollback
  • scope: the scope of the commit, such as: route, component, utils, build ...
  • merge: Merge branch ? of ?.

โค๏ธ Component branch management

  • Module Function Development (feature / xxx)
  • Bug fixes (bug / xxx)

FAQ

๐Ÿ›Ž I just want to use BabelLoading๏ผŒbut it seems that I have to import the whole react-loadingg:
Tryreact-loading-demand, or load on demand in the following way
import BabelLoading from 'react-loadingg/lib/BabelLoading'
๐Ÿ›Ž The component is completely centered by default. If you want to modify the component's style, the component's default completely centered style will be overwritten.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].