❄️ The ultimate Line Progress Bar UI for React - Supports 🌸 Natural color gradients & β˜ƒοΈ Coherent border rounding

Related tags

frogress
Overview

Frogress

NPM version Package size

❄️ The ultimate Line Progress Bar UI for React

@frogress/line

πŸ“¦ Installation

# Install peer depedencies
yarn add react react-dom styled-components

# Install Frogress's Line Progress Bar component
yarn add @frogress/line
  • styled-components will be replaced soon by React's internal StyleSheet(to reduce depedencies).

πŸš€ Usage

import { LineProgressBar } from '@frogress/line'

<LineProgressBar percent={65} />

percent is the percentage of the progress bar(number type value with a range of 0 to 100). This property is required in TypeScript, but it will default to 0 if you ignore it.

πŸ‘“ Compile-time Type checking

- 
- 

+ 
+ 
+ 

- 
- 

The type is enforced so that only integers within the correct range are allowed.

πŸ’‘ What problem does this solve?

Compared

Lots of existing line progress bar UIs do not support color gradients or rounded edges.

Most implementations it wrong. The upper-left image is the most common mistake with inconsistent behavior; Gradients are shrunk with the progress width, border-radius is working strangely with small values.

🌸 Styling

TBD

Size

Color

Rounding

Direction

@frogress/docs

website-preview

πŸ“– Documentation

Development

# πŸ–¨ Clone git repository
git clone https://github.com/junhoyeo/frogress
cd frogress

# πŸ“¦ Install depedencies
yarn install

# πŸ”¨ Build @frogress/line
yarn workspace @frogress/line build

# πŸƒβ€β™€οΈ Run development server for @frogress/docs
yarn workspace @frogress/docs dev
Issues
Releases(1.0.1)
  • 1.0.1(Jul 13, 2021)

    πŸŽ‰ First public release before official launch!!

    • Export LineProgressBarProps as default
    • Fix type definitions
    • Add more customization properties
    Source code(tar.gz)
    Source code(zip)
Owner
Junho Yeo
Creating INEVITABLEβ„’ Services
Junho Yeo
:cyclone: Simple react.js component for an inline progress indicator

react-progress-button Simple React component for a circular Progress Button. Demo Install npm install react-progress-button --save Example Controlled

Mathieu Dutour 517 Sep 11, 2021
Progress component for React and React Native

react-progress-label Progress component for React and React Native Installation yarn add react-progress-label npm install react-progress-label --save

SWIFT CARROT Technologies 95 May 16, 2021
3D animated react button component with progress bar.

3D animated react button component with progress bar.

MD. Ariful Alam 64 Sep 17, 2021
A collection of loading spinner components for react

React Spinners A collection of loading spinners with React.js based on Halogen. This package is bootstraped using react-npm-boilerplate Demo Demo Page

David Hu 2k Sep 23, 2021
Creates a download handler function and gives progress information

Creates a download handler function and gives progress information

Olavo Parno 57 Sep 14, 2021
Amazing collection of React spinners components with pure css

React Spinners CSS Loaders (Vue, Angular) Amazing collection of React spinners components with pure css. The React spinners are based on loading.io an

Josh Kuttler 274 Sep 24, 2021
βšͺ SVG-Powered component to easily create skeleton loadings.

SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading). Features βš™οΈ Customizable: Feel free to change the colors,

Danilo Woznica 11.5k Sep 23, 2021
Make beautiful, animated loading skeletons that automatically adapt to your app.

react-loading-skeleton Make beautiful, animated loading skeletons that automatically adapt to your app. Basic usage Install by npm/yarn with react-loa

David Tang 2.4k Sep 23, 2021
react-loader - React component that displays a spinner via spin.js until your component is loaded.

react-loader react-loader provides your React.js component a simple mechanism for rendering a loading spinner (via spin.js) while data is loading, suc

Cognizant Studio 529 Sep 16, 2021
A collection of loading indicators animated with CSS for React

react-spinkit A collection of loading indicators animated with CSS for React Currently I've ported all the spinner animations from Spinkit. If you hav

Kyle Mathews 1.4k Sep 10, 2021
Easy way to block the user from interacting with your UI.

react-block-ui Easy way to block the user from interacting with your UI. About This library contains easy to use components to prevent the user from i

Availity 271 Sep 13, 2021