React 实现 instagram 风格进度条

看到之前同事开发了一个vue版本的 instagram 彩虹进度条，觉得挺有意思，于是自己也开发了个 react 版的试试,项目地址。

Demo

Live Demo

Installation

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

How to use

导入 InsProgressBar 和 insProgress

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

在 render 方法中使用 InsProgressBar 组件

render() {
    return (
        <div>
            <InsProgressBar />
        </div>
    )
}

最后只需要调用 insProgress.start() 和 insProgress.finish() 两个方法：

insProgress.start() // 显示
insProgress.finish() // 隐藏

Options

<InsProgressBar /> 中可以全局配置

目前支持的配置项：

• height 高度
• delay 隐藏延迟
• position 位置（top/bottom）

example

<InsProgressBar 
    height={'10px'} 
    delay={200} 
    position={insProgress.POSITION.TOP}
/>

也可以在 insProgress 中做局部配置：

example

insProgress.start({
    'height': '10px',
    'position': insProgress.POSITION.TOP
})
insProgress.finish({
    'delay': 100
})