33 lines
829 B
JavaScript
33 lines
829 B
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import styles from './game-loading-overlay.css';
|
|
|
|
const GameLoadingOverlay = ({ visible, progress }) => {
|
|
const pct = Math.max(0, Math.min(100, Math.round(Number(progress) || 0)));
|
|
|
|
return (
|
|
<div
|
|
className={`${styles.overlay}${visible ? '' : ` ${styles.hidden}`}`}
|
|
aria-hidden={!visible}
|
|
>
|
|
<div className={styles.text}>正在加载中</div>
|
|
<div className={styles.barTrack}>
|
|
<div className={styles.barFill} style={{ width: `${pct}%` }} />
|
|
</div>
|
|
<div className={styles.percent}>{pct}%</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
GameLoadingOverlay.propTypes = {
|
|
visible: PropTypes.bool,
|
|
progress: PropTypes.number
|
|
};
|
|
|
|
GameLoadingOverlay.defaultProps = {
|
|
visible: true,
|
|
progress: 0
|
|
};
|
|
|
|
export default GameLoadingOverlay;
|