ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2024-12-28 07:50:32 +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">
<div class="loader__cube loader__cube--1"></div> <div class="loader__cube loader__cube--1"></div>
<div class="loader__cube loader__cube--2"></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; 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 { &.is-active {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }
} }
.loader { .loader {
position: absolute; position: absolute;
top: 50%; top: 50%;

7
src/services/loader.js
View File

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