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 { export default class Blog extends Component {
render() { render() {
if (this.props.isLoading || true) { if (this.props.isLoading) {
return ( return (
<div className={contentStyle.contentWrapper}> <div className={contentStyle.contentWrapper}>
<Spinner/> <Spinner/>

View File

@ -5,12 +5,14 @@ import styles from './Spinner.scss';
export default class Spinner extends Component { export default class Spinner extends Component {
render() { render() {
return ( return (
<div class={styles.ldsEllipsis}> <div className={styles.spinnerWrapper}>
<div className={styles.ldsEllipsis}>
<div></div> <div></div>
<div></div> <div></div>
<div></div> <div></div>
<div></div> <div></div>
</div> </div>
</div>
) )
} }
} }

View File

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

View File

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