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
})
复制代码

转载于:https://juejin.im/post/5ba315206fb9a05cde1d4eee