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