3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-13 17:17:28 +02:00
Code Issues Projects Releases Packages Wiki Activity

style(v2): better loading screen

Browse source
This commit is contained in:
endiliey 2018-10-30 23:17:32 +08:00
parent 6cec7ce982
commit 62b5895ef8
2 changed files with 31 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

10
v2/lib/theme/Loading.js → v2/lib/theme/Loading/index.js
View file

@ -7,12 +7,20 @@
import React from 'react';
import styles from './styles.module.css';
export default props => {
if (props.error) {
console.log(props.error);
return <div align="center">Error</div>;
}
if (props.pastDelay) {
return <div align="center">Loading...</div>;
return (
<div className={styles.loader}>
<p>Please wait a moment</p>
<div className={styles.loaderSpinning} />
</div>
);
}
return null;
};

22
v2/lib/theme/Loading/styles.module.css Normal file
View file

@ -0,0 +1,22 @@
.loader {
width: 100%;
height: 49px;
position: fixed;
text-align: center;
top: 35%;
}
.loaderSpinning {
width: 49px;
height: 49px;
margin: 0 auto;
border: 5px solid #cccccc;
border-radius: 50%;
border-top: 5px solid #1d4d8b;
animation: loader-spin infinite 1s linear;
}
@keyframes loader-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}