react如何控制全局loading_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 (

)

}

}

// 创建元素追加到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;width: 100%;height: 2px;}

.peg {display: block;position: absolute;right: 0px;width: 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 {width: 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;

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

【原生JS插件】LoadingBar页面顶部加载进度条

先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...

仿UC浏览器图片加载进度条

前几天用UC浏览器看新闻(无意中给UC打了广告),看到它的图片加载进度条,正好最近有时间,所以就自己写了一个. 效果图如下 进度条的底色和填充颜色都可以调整. 首先中间的笑脸作为一个整体,其实现代码如 ...

网站顶部显示预加载进度条preload.js

网站加载的速度快的话,不会显示进度条加载时候的样式. 支持性主流浏览器都支持,ie浏览器需要9以上9也支持. 使用方法