walletHome animations
This commit is contained in:
Matias Alejo Garcia
parent
8f8ef3063d
commit
44a96e46cb
2 changed files with 97 additions and 12 deletions
|
|
@ -25,22 +25,15 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div ng-if="index.anyOnGoingProcess" class="text-white text-center">
|
|
||||||
<div class="animated infinite flash">
|
|
||||||
<span translate ng-show="index.onGoingProcessName == 'openingWallet'">Opening Wallet...</span>
|
|
||||||
<span translate ng-show="index.onGoingProcessName == 'updatingStatus'">Updating Status...</span>
|
|
||||||
<span translate ng-show="index.onGoingProcessName == 'updatingBalance'">Updating Balance...</span>
|
|
||||||
<span translate ng-show="index.onGoingProcessName == 'updatingPendingTxps'">Updating Pending Transactions...</span>
|
|
||||||
<span translate ng-show="index.onGoingProcessName == 'scanning'">Scanning Wallet funds...</span>
|
|
||||||
<span translate ng-show="index.onGoingProcessName == 'recreating'">Recreating Wallet on BWS...</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="pr columns line-b">
|
<div class="pr columns line-b">
|
||||||
<div class="avatar-wallet left"
|
<div class="avatar-wallet left"
|
||||||
ng-style="{'background-color':index.backgroundColor}">{{index.walletName | limitTo: 1}}</div>
|
ng-class="{'updating':index.anyOnGoingProcess}"
|
||||||
|
ng-style="{'background-color':index.backgroundColor}"
|
||||||
|
>
|
||||||
|
<div class="">{{index.walletName | limitTo: 1}}</div>
|
||||||
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<a ng-click="$root.go('preferences')" class="button outline light-gray tiny m0">
|
<a ng-click="$root.go('preferences')" class="button outline light-gray tiny m0">
|
||||||
<i class="fi-widget size-18 vm"></i>
|
<i class="fi-widget size-18 vm"></i>
|
||||||
|
|
@ -60,6 +53,23 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="text-white text-center onGoingProcess"
|
||||||
|
ng-show="index.anyOnGoingProcess"
|
||||||
|
ng-style="{'color':index.backgroundColor}"
|
||||||
|
ng-class="{'opacityCycle':index.anyOnGoingProcess}"
|
||||||
|
>
|
||||||
|
<span translate ng-show="index.onGoingProcessName == 'openingWallet'">Opening Wallet...</span>
|
||||||
|
<span translate ng-show="index.onGoingProcessName == 'updatingStatus'">Updating Status</span>
|
||||||
|
<span translate ng-show="index.onGoingProcessName == 'updatingBalance'">Updating Balance...</span>
|
||||||
|
<span translate ng-show="index.onGoingProcessName == 'updatingPendingTxps'">Updating Pending Transactions...</span>
|
||||||
|
<span translate ng-show="index.onGoingProcessName == 'scanning'">Scanning Wallet funds...</span>
|
||||||
|
<span translate ng-show="index.onGoingProcessName == 'recreating'">Recreating Wallet on BWS...</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div ng-show="index.notAuthorized">
|
<div ng-show="index.notAuthorized">
|
||||||
<div class="text-center text-warning">
|
<div class="text-center text-warning">
|
||||||
<i class="fi-alert"></i>
|
<i class="fi-alert"></i>
|
||||||
|
|
|
||||||
|
|
@ -1106,3 +1106,78 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
|
||||||
cursor: pointer !important;
|
cursor: pointer !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.updating {
|
||||||
|
-webkit- animation-iteration-count: infinite;
|
||||||
|
-webkit-animation-name: up-animation;
|
||||||
|
-webkit-animation-duration: 1s;
|
||||||
|
-webkit-animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Generated with Bounce.js. Edit at http://goo.gl/Vn2Euz */
|
||||||
|
|
||||||
|
@-webkit-keyframes up-animation {
|
||||||
|
0% { -webkit-transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
3.4% { -webkit-transform: matrix3d(0.658, 0, 0, 0, 0, 0.703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.658, 0, 0, 0, 0, 0.703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
4.7% { -webkit-transform: matrix3d(0.725, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.725, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
6.81% { -webkit-transform: matrix3d(0.83, 0, 0, 0, 0, 0.946, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.83, 0, 0, 0, 0, 0.946, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
9.41% { -webkit-transform: matrix3d(0.942, 0, 0, 0, 0, 1.084, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.942, 0, 0, 0, 0, 1.084, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
10.21% { -webkit-transform: matrix3d(0.971, 0, 0, 0, 0, 1.113, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.971, 0, 0, 0, 0, 1.113, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
13.61% { -webkit-transform: matrix3d(1.062, 0, 0, 0, 0, 1.166, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.062, 0, 0, 0, 0, 1.166, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
14.11% { -webkit-transform: matrix3d(1.07, 0, 0, 0, 0, 1.165, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.07, 0, 0, 0, 0, 1.165, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
17.52% { -webkit-transform: matrix3d(1.104, 0, 0, 0, 0, 1.12, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.104, 0, 0, 0, 0, 1.12, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
18.72% { -webkit-transform: matrix3d(1.106, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.106, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
21.32% { -webkit-transform: matrix3d(1.098, 0, 0, 0, 0, 1.035, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.098, 0, 0, 0, 0, 1.035, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
24.32% { -webkit-transform: matrix3d(1.075, 0, 0, 0, 0, 0.98, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.075, 0, 0, 0, 0, 0.98, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
25.23% { -webkit-transform: matrix3d(1.067, 0, 0, 0, 0, 0.969, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.067, 0, 0, 0, 0, 0.969, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
29.03% { -webkit-transform: matrix3d(1.031, 0, 0, 0, 0, 0.948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.031, 0, 0, 0, 0, 0.948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
29.93% { -webkit-transform: matrix3d(1.024, 0, 0, 0, 0, 0.949, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.024, 0, 0, 0, 0, 0.949, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
35.54% { -webkit-transform: matrix3d(0.99, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
36.74% { -webkit-transform: matrix3d(0.986, 0, 0, 0, 0, 0.989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.986, 0, 0, 0, 0, 0.989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
41.04% { -webkit-transform: matrix3d(0.98, 0, 0, 0, 0, 1.011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.98, 0, 0, 0, 0, 1.011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
44.44% { -webkit-transform: matrix3d(0.983, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.983, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
52.15% { -webkit-transform: matrix3d(0.996, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.996, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
59.86% { -webkit-transform: matrix3d(1.003, 0, 0, 0, 0, 0.995, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.003, 0, 0, 0, 0, 0.995, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
63.26% { -webkit-transform: matrix3d(1.004, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.004, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
75.28% { -webkit-transform: matrix3d(1.001, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.001, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
85.49% { -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
90.69% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.opacityCycle {
|
||||||
|
-webkit- animation-iteration-count: infinite;
|
||||||
|
-webkit-animation-name: opCycle-animation;
|
||||||
|
-webkit-animation-duration: 20s;
|
||||||
|
-webkit-animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@-webkit-keyframes opCycle-animation
|
||||||
|
{
|
||||||
|
0% {opacity:1}
|
||||||
|
15% {opacity:0.7}
|
||||||
|
30% {opacity:0.85}
|
||||||
|
45% {opacity:0.5}
|
||||||
|
60% {opacity:0.8}
|
||||||
|
75% {opacity:0.7}
|
||||||
|
99% {opacity:1;}
|
||||||
|
}
|
||||||
|
|
||||||
|
.onGoingProcess {
|
||||||
|
bottom: 70px;
|
||||||
|
height: 24px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 24px;
|
||||||
|
left:0px;
|
||||||
|
width:100%;
|
||||||
|
position: absolute;
|
||||||
|
background:#DDD;
|
||||||
|
border-top:1px solid;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue