the-djmaze/snappymail
1
1
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2024-12-25 00:21:29 +08:00
Code Issues Projects Releases Packages Wiki Activity

Improve non-composited animation

Browse source
This commit is contained in:
djmaze 2021-04-20 13:41:51 +02:00
parent e1a08a9755
commit 1a8eea24cf
3 changed files with 11 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
dev/Styles/_progressjs.css
View file

@ -1,30 +1,20 @@
#progressjs { #progressjs {
background-color: #999;
left: 0; left: 0;
overflow: hidden;
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%;
z-index: 2000;
}
.progressjs-inner {
background-color: #939595;
height: 3px;
overflow: hidden;
position: relative;
transition: width .5s; transition: width .5s;
width: 0; width: 0;
z-index: 2000; z-index: 2000;
} }
.progressjs-percent { #progressjs > div {
position: absolute; animation: simple-pace-stripe-animation 500ms linear infinite;
top: 0;
left: 0;
right: -32px;
bottom: 0;
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);
background-size: 32px 32px; background-size: 32px 32px;
animation: simple-pace-stripe-animation 500ms linear infinite; height: 3px;
margin-right: -32px;
} }
@keyframes simple-pace-stripe-animation { @keyframes simple-pace-stripe-animation {

9
dev/boot.js
View file

@ -72,11 +72,11 @@ const
p = win.progressJs = { p = win.progressJs = {
set: percent => progress.style.width = Math.min(percent, 100) + '%', set: percent => progress.style.width = Math.min(percent, 100) + '%',
end: () => { end: () => {
if (container) { if (progress) {
p.set(100); p.set(100);
setTimeout(() => { setTimeout(() => {
container.remove(); progress.remove();
container = progress = null; progress = null;
}, 600); }, 600);
} }
} }
@ -90,8 +90,7 @@ const layout = getCookie('rllayout');
doc.documentElement.classList.toggle('rl-mobile', 'mobile' === layout || (!layout && 1000 > innerWidth)); doc.documentElement.classList.toggle('rl-mobile', 'mobile' === layout || (!layout && 1000 > innerWidth));
let pStep = 0, let pStep = 0,
container = eId('progressjs'), progress = eId('progressjs'),
progress = container.querySelector('.progressjs-inner'),
RL_APP_DATA = {}; RL_APP_DATA = {};

2
snappymail/v/0.0.0/app/templates/Index.html
View file

@ -41,7 +41,7 @@
</div> </div>
<div id="rl-templates"></div> <div id="rl-templates"></div>
</div> </div>
<div id="progressjs"><div class="progressjs-inner"><div class="progressjs-percent"></div></div></div> <div id="progressjs"><div></div></div>
<script type="text/javascript">{{BaseAppBootScript}}</script> <script type="text/javascript">{{BaseAppBootScript}}</script>
</body> </body>