Add css spinner
This commit is contained in:
parent
0bcf038f48
commit
6321539711
|
@ -1,4 +1,5 @@
|
|||
import React, {Component} from 'react';
|
||||
import {Spinner} from '.';
|
||||
import '../static/stylesheets/globals.scss';
|
||||
import styles from './About.scss';
|
||||
import contentStyle from '../static/stylesheets/content.scss';
|
||||
|
@ -9,7 +10,7 @@ export default class About extends Component {
|
|||
if (this.props.isLoading) {
|
||||
return (
|
||||
<div className={contentStyle.contentWrapper}>
|
||||
<h1>Loading</h1>
|
||||
<Spinner/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import React, {Component} from 'react';
|
||||
import {Spinner} from '.';
|
||||
import '../static/stylesheets/globals.scss';
|
||||
import styles from './Blog.scss';
|
||||
import contentStyle from '../static/stylesheets/content.scss';
|
||||
|
@ -6,10 +7,10 @@ import contentStyle from '../static/stylesheets/content.scss';
|
|||
export default class Blog extends Component {
|
||||
|
||||
render() {
|
||||
if (this.props.isLoading) {
|
||||
if (this.props.isLoading || true) {
|
||||
return (
|
||||
<div className={contentStyle.contentWrapper}>
|
||||
<h1>Loading</h1>
|
||||
<Spinner/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import React, {Component} from 'react';
|
||||
import {Spinner} from '.';
|
||||
import '../static/stylesheets/globals.scss';
|
||||
import contentStyle from '../static/stylesheets/content.scss';
|
||||
import styles from './Post.scss';
|
||||
|
@ -8,7 +9,9 @@ export default class Post extends Component {
|
|||
|
||||
if (this.props.isLoading) {
|
||||
return (
|
||||
<h1>Loading</h1>
|
||||
<div className={contentStyle.contentWrapper}>
|
||||
<Spinner/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,16 @@
|
|||
import React, {Component} from 'react';
|
||||
import '../static/stylesheets/globals.scss';
|
||||
import styles from './Spinner.scss';
|
||||
|
||||
export default class Spinner extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div class={styles.ldsEllipsis}>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
|
@ -0,0 +1,59 @@
|
|||
/*
|
||||
from https://loading.io/css/
|
||||
*/
|
||||
|
||||
.ldsEllipsis {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
.ldsEllipsis div {
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
animation-timing-function: cubic-bezier(0, 1, 1, 0);
|
||||
}
|
||||
.ldsEllipsis div:nth-child(1) {
|
||||
left: 6px;
|
||||
animation: lds-ellipsis1 0.6s infinite;
|
||||
}
|
||||
.ldsEllipsis div:nth-child(2) {
|
||||
left: 6px;
|
||||
animation: lds-ellipsis2 0.6s infinite;
|
||||
}
|
||||
.ldsEllipsis div:nth-child(3) {
|
||||
left: 26px;
|
||||
animation: lds-ellipsis2 0.6s infinite;
|
||||
}
|
||||
.ldsEllipsis div:nth-child(4) {
|
||||
left: 45px;
|
||||
animation: lds-ellipsis3 0.6s infinite;
|
||||
}
|
||||
@keyframes lds-ellipsis1 {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes lds-ellipsis3 {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
@keyframes lds-ellipsis2 {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(19px, 0);
|
||||
}
|
||||
}
|
|
@ -3,4 +3,5 @@ export { default as Blog } from './Blog';
|
|||
export { default as About } from './About';
|
||||
export { default as Post } from './Post';
|
||||
export { default as NotFoundPage } from './NotFoundPage';
|
||||
export { default as Spinner } from './Spinner';
|
||||
export { default as App } from './App';
|
||||
|
|
Loading…
Reference in New Issue