smallsolar/libkiwix
1
0
Fork 0
mirror of https://github.com/kiwix/libkiwix.git synced 2025-06-26 10:11:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

corrected spinner and fadeout effect

Browse Source
This commit is contained in:
Manan Jethwani
2021-06-03 19:56:28 +05:30
committed by Emmanuel Engelhart
parent f39c558d2a
commit d6c62b3cd3
2 changed files with 19 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
static/templates/index.html
View File

@ -42,6 +42,7 @@
text-align: center;
}
.kiwixHomeBody {
position: relative;
text-align: center;
min-height: 100%;
margin: 30px 0;
@ -132,16 +133,16 @@
}
.loader-spinner {
position: absolute;
top: 50%;
top: -50%;
left: 50%;
border: 2px solid #f3f3f3;
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 2px solid #3498db;
width: 50px;
height: 50px;
border-top: 5px solid #3498db;
width: 40px;
height: 40px;
margin: auto;
-webkit-animation: spin 0.5s linear infinite; /* Safari */
animation: spin 2s linear infinite;
-webkit-animation: spin 1s linear infinite; /* Safari */
animation: spin 1s linear infinite;
margin-top: 35px;
margin-bottom: -35px;
}
@ -155,25 +156,17 @@
100% { transform: rotate(360deg); }
}
.loader {
display: none;
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
position: relative;
height: 70px;
width: 100%;
height: 100%;
z-index: 100;
}
.fadeOut {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
background: linear-gradient(180deg, #e8e8e8 50%, rgb(138, 137, 137) 100%);
height: 30px;
background: linear-gradient(180deg, rgba(232, 232, 232, 0) 0%, rgb(232, 232, 232) 100%);
height: 80px;
width: 100%;
}
</style>
@ -198,9 +191,9 @@
</div>
<div class="kiwixHomeBody">
<div class="book__list"></div>
<div id="fadeOut" class="fadeOut"></div>
</div>
<div class="loader"><div class="loader-spinner"></div></div>
<div id="kiwixfooter">Powered by <a href="https://kiwix.org">Kiwix</a></div>
<div class="fadeOut"></div>
</body>
</html>