ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2024-06-26 02:12:02 +05:30
Code Issues Packages Projects Releases Wiki Activity

#22: use opaque loader background on first show

Browse Source
This commit is contained in:
SleepWalker 2018-05-13 22:32:22 +03:00
parent 64cb197756
commit a860e10847
3 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ui/loader/loader.html
View File

@ -1,4 +1,4 @@
<div id="loader" class="loader-overlay">
<div id="loader" class="loader-overlay is-first-launch">
<div class="loader">
<div class="loader__cube loader__cube--1"></div>
<div class="loader__cube loader__cube--2"></div>

7
src/components/ui/loader/loader.scss
View File

@ -12,12 +12,19 @@
transition: 0.4s ease;
&.is-first-launch {
// if loader is shown for the first time, we will
// remove opacity and hide the entire site contents
background: #f2efeb;
}
&.is-active {
opacity: 1;
visibility: visible;
}
}
.loader {
position: absolute;
top: 50%;

7
src/services/loader.js
View File

@ -3,14 +3,15 @@ let stack = 1;
export default {
show() {
if (++stack !== 1) {
if (++stack >= 0) {
document.getElementById('loader').classList.add('is-active');
}
},
hide() {
if (--stack === 0) {
document.getElementById('loader').classList.remove('is-active');
if (--stack <= 0) {
stack = 0;
document.getElementById('loader').classList.remove('is-active', 'is-first-launch');
}
}
};