https://github.com/gikey/react-ins-progress-bar

An instagram style progress bar
https://github.com/gikey/react-ins-progress-bar

instagram progress-bar react

Last synced: 4 days ago
JSON representation

An instagram style progress bar

• Host: GitHub
• URL: https://github.com/gikey/react-ins-progress-bar
• Owner: gikey
• Created: 2018-09-10T09:14:19.000Z (about 6 years ago)
• Default Branch: main
• Last Pushed: 2023-01-06T15:57:38.000Z (almost 2 years ago)
• Last Synced: 2024-09-25T16:54:26.532Z (about 2 months ago)
• Topics: instagram, progress-bar, react
• Language: TypeScript
• Homepage: https://gikey.github.io/react-ins-progress-bar/
• Size: 813 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 22
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-ins-progress-bar

English | [简体中文](./docs/zh-CN.md)

An instagram style progress bar 

![](https://img.shields.io/npm/v/react-ins-progress-bar?style=flat-square)

![](https://img.shields.io/npm/dm/react-ins-progress-bar?style=flat-square)

## Demo

[Live Demo](https://gikey.github.io/react-ins-progress-bar/)

## Installation

```bash

npm install react-ins-progress-bar --save

```

## How to use

To include this project you need to require the module by using CommonJS syntax or ES6 Modules Syntax (recommended).

```javascript

import { InsProgressBar, insProgress } from 'react-ins-progress-bar';

```

render the InsProgressBar component in the higher DOM node possible, such as:

```javascript

render() {

    return (

        


            

        

    )

}

```


Then just call `insProgress.start()` and `insProgress.finish()`

```javascript

insProgress.start() // show progress bar

insProgress.finish() // hide progress bar

```

### Options

The  component can receive some properties

#### Supported properties:

* `height` progress bar height (optional, default 5px)

* `delay` progress bar fadeOut time (optional, default 300ms) 

* `position` progress bar position (optional, top or bottom)

* `duration` animation duration (optional, default 3000ms)

* `colors` gradient colors (optional)

##### example

```javascript

```

The `insProgress.start()` supported properties are the same as `` except `delay` property , `insProgress.finish()` support `delay` properties.

##### example

```javascript

insProgress.start({

    'height': '10px',

    'position': 'bottom',

    'duration': 3000,

})

insProgress.finish({

    'delay': 100

})

```