Recently when the project development encountered such a situation did not hesitate to intervene in the development plan of the loading bar.

Github project address

Demonstration effect

Define requirements

The loading bar says the simple requirements are:

Load animation + copy + hierarchy position

If you understand the requirements, development is relatively easy. Some of the scenarios you can use are pop-box submission, page load data, and button disable submission.

The general structure of their design is as follows


     
  
    
      

       
          {loading} .  // loading animation element
        
       

        {this.props.text}
       

    
      
 

     
  
Copy the code

Because of the convenience of JSX, we can define inline things that go straight back to loading. You can also store custom elements as children, if you prefer SVG or CSS animations.

In terms of mask layer positioning, in many cases you might want to load an animated DIV that fills the entire screen,

For the outermost DIV, position: absolute is taken into account. The GIF in the middle needs to be absolutely centered using positioning. There are many solutions to this, but if you use absolute translate, translate is more convenient and straightforward.

.loading-inner{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
Copy the code

However, this method requires the outer element to be located. If you don’t need a mask effect, you can customize the outer style. This increases flexibility.

The other key point, though simple, is that you can control how styles are shown and hidden. Using property controls is like this:

    
Copy the code

So we can start defining the basic attributes:

Spinner. PropTypes = {type: react.proptypes. string, // Animation type display: react.proptypes. string, // display form color: PropTypes. String, // Load bar color style: react.proptypes. object, // Style object text: react.proptypes. string, // Built-in copy CLS: React.proptypes. string, // override class show: react.proptypes. bool, // control show hide}; Spinner. DefaultProps = {type: 'SVG ', style: {}, color: '#9b59b6', text:'... ', cls: '', show: false, }Copy the code

Almost as written down, you can achieve a basic loading effect of the component.

Github project address

Demonstration effect

Begin to use

Use Npm 

npm install react-core-loading-spinner --save-dev  
Copy the code

Use yarn 

yarn add react-core-loading-spinner  
Copy the code

code

import React from 'react'; import {Spinner} from '.. /react-core-image-upload'; let App = React.createClass({ //... render() { return(
     

        
      
     
); }})Copy the code