diff --git a/src/components/About.js b/src/components/About.js index d568fa7..180786a 100644 --- a/src/components/About.js +++ b/src/components/About.js @@ -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 (
-

Loading

+
); } diff --git a/src/components/Blog.js b/src/components/Blog.js index 5bebff2..9895abb 100644 --- a/src/components/Blog.js +++ b/src/components/Blog.js @@ -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 (
-

Loading

+
); } diff --git a/src/components/Post.js b/src/components/Post.js index 49cc4b8..8dc470c 100644 --- a/src/components/Post.js +++ b/src/components/Post.js @@ -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 ( -

Loading

+
+ +
); } diff --git a/src/components/Spinner.js b/src/components/Spinner.js new file mode 100644 index 0000000..b2ab553 --- /dev/null +++ b/src/components/Spinner.js @@ -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 ( +
+
+
+
+
+
+ ) + } +} diff --git a/src/components/Spinner.scss b/src/components/Spinner.scss new file mode 100644 index 0000000..ac9bb39 --- /dev/null +++ b/src/components/Spinner.scss @@ -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); + } +} diff --git a/src/components/index.js b/src/components/index.js index dbcc3db..48086c8 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -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';