Update css spinners

This commit is contained in:
LordMathis 2018-05-10 11:36:42 +02:00
parent 0be97285db
commit 98f2ecfc82
4 changed files with 17 additions and 8 deletions

View File

@ -7,7 +7,7 @@ import contentStyle from '../static/stylesheets/content.scss';
export default class Blog extends Component {
render() {
if (this.props.isLoading || true) {
if (this.props.isLoading) {
return (
<div className={contentStyle.contentWrapper}>
<Spinner/>

View File

@ -5,11 +5,13 @@ 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 className={styles.spinnerWrapper}>
<div className={styles.ldsEllipsis}>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
)
}

View File

@ -1,12 +1,20 @@
/*
from https://loading.io/css/
*/
@import "../static/stylesheets/variables.scss";
.spinnerWrapper {
width: 100%;
display: flex;
justify-content: center;
}
.ldsEllipsis {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
margin: 0 auto;
}
.ldsEllipsis div {
position: absolute;
@ -14,7 +22,7 @@
width: 11px;
height: 11px;
border-radius: 50%;
background: #fff;
background: $black;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.ldsEllipsis div:nth-child(1) {

View File

@ -13,5 +13,4 @@
.content {
box-sizing: border-box;
margin: 0 auto;
}