Giter Club home page Giter Club logo

react-sweet-progress's Introduction

React Sweet Progress

npm version

A way to quickly add a react progress bar to your app ๐ŸŒˆ

Imgur

Basic Usage

  1. Install via npm and yarn

    npm i -S react-sweet-progress
    
    // or
    
    yarn add react-sweet-progress
    
  2. Import Progress and progress bar styles

    import { Progress } from 'react-sweet-progress';
    import "react-sweet-progress/lib/style.css";
    
  3. Enjoy

    <Progress percent={88} status="success" />
    

Imgur

<Progress type="circle" percent={100} status="success" />

Imgur

Customize

Basic steps to customize React progress bar.

Percent ๐Ÿน

Percent cant set the completion percentage of progress bar.

<Progress />

Imgur


<Progress
  percent={69}
/>

Imgur

Status โญ

You can use 3 status types: active, error, success. By default status equal to success when percent is 100.

<Progress
  percent={88}
  status="success"
/>

Imgur


<Progress
  percent={43}
  status="error"
/>

Imgur

Exotic theme ๐Ÿ”ฅ

With theme param you can customize icons and styles of the progress bar.

<Progress
  theme={{
    success: {
      symbol: '๐Ÿ„โ€',
      color: 'rgb(223, 105, 180)'
    },
    active: {
      symbol: '๐Ÿ˜€',
      color: '#fbc630'
    },
    default: {
      symbol: '๐Ÿ˜ฑ',
      color: '#fbc630'
    }
  }}
/>

Imgur Imgur Imgur

If you don't specify the theme trail color, then the deafult value of #efefef will be used.

<Progress
  theme={
    {
      error: {
        symbol: this.state.percent + '%',
        trailColor: 'pink',
        color: 'red'
      },
      default: {
        symbol: this.state.percent + '%',
        trailColor: 'lightblue',
        color: 'blue'
      },
      active: {
        symbol: this.state.percent + '%',
        trailColor: 'yellow',
        color: 'orange'
      },
      success: {
        symbol: this.state.percent + '%',
        trailColor: 'lime',
        color: 'green'
      }
    }
  }
/>

Imgur

If you don't pass custom status then it will use the default color theme.

<Progress
  theme={{
    success: {
      symbol: '๐Ÿ„โ€',
      color: 'rgb(223, 105, 180)'
    }
  }}
/>

Imgur Imgur Imgur

Also you can use the status param.

<Progress
  percent={100}
  status="error"
  theme={{
    error: {
      symbol: '๐Ÿค”',
      color: '#fbc630'
    }
  }}
/>

Imgur

Circle width ๐Ÿ˜ฒ

Width param can set the size of circle progress bar, also it's set font and icon sizes automatically.

<Progress
  type="circle"
  width={70}
  percent={70}
/>
<Progress
  type="circle"
  percent={30}
/>

Imgur

Circle strokeWidth ๐Ÿค—

With strokeWidth param you can customize the path circle strokeWidth.

<Progress
  type="circle"
  strokeWidth={3}
  percent={70}
/>
<Progress
  type="circle"
  percent={30}
/>

Imgur

API

Progress

Property Description Type Default
percent set the completion percentage number 0
status set the status of the progress, options: success, error, active string -
theme set the custom styles of the progress, options: [status]: { color: [string], trailColor: [string], symbol: '[any]'} object -
style set the custom style of the react progress bar object -
type set the type of the progress bar, options: circle string -
width set sizes of progress bar type circle number 132
strokeWidth set strokeWidth of progress bar type circle number 6
className set the custom class of the react progress bar object -
symbolClassName set the symbol custom class object -

Supported Browsers

React Sweet Porgress designed to support the latest web browsers. We support the current versions of Chrome, Firefox, Safari, Microsoft Edge and Internet Explorer 11. Also support the latest mobile browsers.

How to run example locally ?

  1. git clone https://github.com/abraztsov/react-sweet-progress.git
  2. cd react-sweet-progress
  3. npm start
  4. Go to localhost:8080

Feature Requests / Find Bug ?

Have an idea for a package or a feature you'd love to see in ReactSimpleFlexGrid? Search for existing GitHub issues and join the conversation or create new!

FAQ

This component based on ant design progress. Huge thanks them for a such an awesome work.

Future Plans

  • Create Circle progress
  • Add flexibility to custom styles

Updates

1.1.1 Trail color can now be specified by a progress theme.

1.1.0 Added Circle progress

1.0.0 First release

react-sweet-progress's People

Contributors

nickbullll avatar nkokhelox avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

react-sweet-progress's Issues

default theme is set to 'active'

in the docs it says it will use default theme if status not specified. but it's actually using 'active' theme..
is it normal?
plus it would be best if we can specify some properties of a theme like symbol in default theme and override only others (so we don't have to customize every theme)
thanks

Error on import

Hello. I'm encountering this error when importing the style.css

Uncaught Error: Cannot find module 'react-sweet-progress/lib/style.css'

My component looks like this:

import { Progress } from 'react-sweet-progress'
import 'react-sweet-progress/lib/style.css'

class ProgressModal extends Component {
  render () {
    const { onCloseModal } = this.props
    return (
      <Fragment>
        <ModalBody>
          <Progress percent={88} status='active' />
        </ModalBody>
        <ModalFooter>
          <button disabled onClick={onCloseModal}>
            Please wait a moment
          </button>
        </ModalFooter>
      </Fragment>
    )
  }
}

"src" or "lib" directory missing if installing 1.1.1 from npm

After installing the latest version with npm and run webpack, I got the error:
These dependencies were not found:

  • react-sweet-progress in ./assets/js/app.js
  • react-sweet-progress/lib/style.css in ./assets/js/app.js
    I thought I had something wrong in webpack or somewhere else. It took me an hour or so to realise that your package does not contain any actual source files apart from some config stuff.
    I used your library in another project before and I didn't encounter this issue. Then I figured out that my another project was using a previous version which is 1.1.0.
    You must have forgotten to upload the src or lib directory to npm with your 1.1.1 update.

Fraction instead of percent option

Love the library! I am using it as an experience like bar for objectives, but would like to request to have the percent instead be a fraction shown on the right of the bar, or in the center of the circle.

So like -----------3/5 instead of -----------60%

Undefined inner classes

The colored line has "undefined" class when status is success error or default, but when status is "active" the line have class react-sweet-progress-line-inner-status-active. It would be nice to have similar classes on all statuses.

fixing decimal points

Does anyone know how to set it to a specific decimal point? because in my side its showing all the numbers after decimal point

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.