Add css spinner

This commit is contained in:
LordMathis 2018-05-10 10:45:47 +02:00
parent 0bcf038f48
commit 6321539711
6 changed files with 85 additions and 4 deletions

View File

@ -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>
);
}

View File

@ -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>
);
}

View File

@ -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>
);
}

16
src/components/Spinner.js Normal file
View File

@ -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>
)
}
}

View File

@ -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);
}
}

View File

@ -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';