React 實現 instagram 風格進度條

養豬小能手發表於2018-09-20
React

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
})
複製程式碼

相關文章