github.com/muhammedhassanm/blockchain@v0.0.0-20200120143007-697261defd4d/build-blockchain-insurance-app-master/web/src/shared/Loading.js (about)

     1  'use strict';
     2  
     3  import React, { Props } from 'react';
     4  import PropTypes from 'prop-types';
     5  
     6  const Loading = ({ hidden, text, children }) => {
     7    if (hidden) {
     8      return <div>{children}</div>;
     9    }
    10    return (
    11      <div style={{ position: 'relative', cursor: 'progress', height: '100%' }}>
    12        <div style={{
    13          textAlign: 'center', position: 'absolute',
    14          top: '50%', left: '50%', width: '100%',
    15          transform: 'translate(-50%, -50%)', zIndex: '100'
    16        }}>
    17          <div>
    18            <p>
    19              <span className='ibm-h1 ibm-spinner' />
    20            </p>
    21            <p>{text}</p>
    22          </div>
    23        </div>
    24        <div style={{ filter: 'blur(2px)' }}>
    25          <div style={{ position: 'absolute', width: '100%', height: '100%' }} />
    26          {children}
    27        </div>
    28      </div>
    29    );
    30  };
    31  
    32  Loading.propTypes = {
    33    hidden: PropTypes.bool.isRequired,
    34    text: PropTypes.string,
    35    children: PropTypes.element.isRequired
    36  };
    37  
    38  export default Loading;