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 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 class="pr columns line-b">
|
||||
<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">
|
||||
<a ng-click="$root.go('preferences')" class="button outline light-gray tiny m0">
|
||||
<i class="fi-widget size-18 vm"></i>
|
||||
|
|
@ -60,6 +53,23 @@
|
|||
</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 class="text-center text-warning">
|
||||
<i class="fi-alert"></i>
|
||||
|
|
|
|||
|
|
@ -1106,3 +1106,78 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
|
|||
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