muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
Code Packages Activity Actions

added preloader to flow

Browse source
This commit is contained in:
Fedor Katurov 2019-11-07 16:44:24 +07:00
parent c1825a1b1c
commit 47c421dbfa
2 changed files with 89 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

99
src/index.html
View file

@ -1,13 +1,88 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8"> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800&display=swap&subset=cyrillic" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<title><%= htmlWebpackPlugin.options.title %></title> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800&display=swap&subset=cyrillic"
</head> rel="stylesheet" />
<body> <title><%= htmlWebpackPlugin.options.title %></title>
<div id="app"></div> <style>
</body> #main_loader {
</html> position: fixed;
width: 100%;
height: 100%;
background: #222222;
top: 0;
left: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font: 600 22px 'Montserrat';
color: white;
}
#main_loader>div {
margin: 3px 0;
}
@keyframes erdball {
0% {
transform: translate(100%, 100%);
}
100% {
transform: translate(0, 0);
}
}
#preload_shade {
width: 120px;
height: 120px;
box-shadow: white 0 0 0 3px;
border-radius: 100%;
overflow: hidden;
position: relative;
margin-bottom: 15px !important;
}
#preload_shade>span {
width: 100%;
height: 100%;
box-shadow: white 0 0 0 2px;
border-radius: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
animation: erdball 3s infinite;
will-change: transform;
}
#preload_shade>span:nth-child(2) {
animation-delay: -1s;
}
#preload_shade>span:nth-child(3) {
animation-delay: -2s;
}
</style>
</head>
<body>
<div id="main_loader">
<div id="preload_shade">
<span></span>
<span></span>
<span></span>
</div>
<div>СМИРЕННО</div>
<div>ОЖИДАЙТЕ</div>
</div>
<div id="app"></div>
</body>
</html>

2
src/redux/flow/sagas.ts
View file

@ -37,6 +37,8 @@ function* onGetFlow() {
yield put(flowSetHeroes(heroes)); yield put(flowSetHeroes(heroes));
yield put(flowSetRecent(recent)); yield put(flowSetRecent(recent));
yield put(flowSetUpdated(updated)); yield put(flowSetUpdated(updated));
document.getElementById('main_loader').style.display = 'none';
} }
function* onSetCellView({ id, flow }: ReturnType<typeof flowSetCellView>) { function* onSetCellView({ id, flow }: ReturnType<typeof flowSetCellView>) {