react封装简单的浏览器顶部加载进度条全局组件

在项目中经常会有在请求前后加loading或者加加载进度条，一般这些组件都会抽离出来作为全局组件

进度条的插件貌似都不是很符合自己项目中的需求，于是。。

参考nprogress样式，自己在项目中封装组件，实现简单的顶部加载进度条。效果如下

组件放到components文件夹下，新建progress文件夹

progress/index.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import './progress.less'

let defaultState = {show:false}
class Progress extends Component {
  constructor(props, context){
        super(props, context)
        this.state = {...defaultState}
    }

  start(){ // 开始显示
    this.setState({
      show:true
    })
  }

  done(){ // 结束隐藏
    this.setState({
      show:false
    })
  }
  render(){
    return (
      <div className="myprogress" style={this.state.show? {display:'block'}:{display:'none'}}>
        <div className="bar">
          <div className="peg"></div>
        </div>
        <div className="spinner">
          <div className="spinner-icon"></div>
        </div>
      </div>
      )
  }

}

// 创建元素追加到body
let div = document.createElement('div');
let props = {
};
document.body.appendChild(div);
 
let Box = ReactDOM.render(React.createElement(
  Progress,
  props
),div);
export default Box;

progress/progress.less

@themecolor:#ffc900;
.myprogress {
  pointer-events: none;
  .bar {background: @themecolor;position: fixed;z-index: 1031;top: 0;
  left: 0; 100%;height: 2px;}
  .peg {display: block;position: absolute;right: 0px; 100px;height: 100%;box-shadow: 0 0 10px @themecolor, 0 0 5px @themecolor;
    opacity: 1.0;-webkit-transform: rotate(3deg) translate(0px, -4px);
    -ms-transform: rotate(3deg) translate(0px, -4px);transform: rotate(3deg) translate(0px, -4px);}
  .spinner {display: block;position: fixed;z-index: 1031;top: 15px;right: 15px;}
  .spinner-icon { 18px;height: 18px;box-sizing: border-box;
  border: solid 2px transparent;border-top-color: @themecolor;border-left-color: @themecolor;border-radius: 50%;
  -webkit-animation: myprogress-spinner 400ms linear infinite;
          animation: myprogress-spinner 400ms linear infinite;}
  .myprogress-custom-parent {overflow: hidden;position: relative;}
}

.myprogress-custom-parent .myprogress .spinner,
.myprogress-custom-parent .myprogress .bar {
  position: absolute;
}

@-webkit-keyframes myprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes myprogress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

使用--（在请求拦截器里加，请求开始之前加，请求结束隐藏）

import axios from 'axios'
import MProgress from '@/components/progress'
// 设置超时时间
axios.defaults.timeout = 10000

axios.interceptors.request.use(config=>{ // 请求之前加loading
  MProgress.start();
  return config
},error=>{
  return Promise.reject(error)
})

axios.interceptors.response.use(config=>{ // 响应成功关闭loading
  MProgress.done();
  return config
},error=>{
  return Promise.reject(error)
})

export default axios;

以上，封装遮罩层、弹出层同理