feat(loader): modify layout, blue background, with smaller and centered logo

pull/73/head
Clement G 4 years ago committed by guhur
parent 170772eee5
commit be4c3eb14f

@ -1,10 +1,10 @@
import React from 'react';
import logo from './loader-pulse-2-alpha.gif';
import logo from './loader-pulse-2.gif';
import './style.css';
const Loader = () => {
return (
<div className="loader">
<div className="loader bg-primary">
<img src={logo} alt="Loading..." />
</div>);
};

@ -1,9 +1,18 @@
.loader {
display: flex;
justify-content: center;
align-items: center;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
top:0;
left:0;
height:100%;
width:100%;
position:fixed;
z-index:15;
}
.loader > img {
width:150px;
height:150px;
position:absolute;
margin:-125px 0 0 -125px;
top:50%;
left:50%;
z-index:16;
}

@ -1,12 +1,8 @@
import React from 'react';
import Loader from '../loader';
import './style.scss';
const Wait = () => {
return (
<div className="waiting">
<Loader />
</div>);
return (<Loader />);
};

@ -1,22 +0,0 @@
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.waiting {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 100%;
left: 0px;
z-index: 15;
.loader {
@include border-radius(10px);
min-width: 200px;
background-color: black;
}
}
Loading…
Cancel
Save