anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

Revert "status notifications"

Browse source
This commit is contained in:
Matias Alejo Garcia 2015-04-23 16:33:36 -03:00
commit 6a4c083f7a
2 changed files with 107 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

56
public/views/walletHome.html
View file

@ -2,12 +2,12 @@
<div class="oh" ng-show="!index.noFocusedWallet"> <div class="oh" ng-show="!index.noFocusedWallet">
<div class="amount" ng-style="{'background-color':index.backgroundColor}"> <div class="amount" ng-style="{'background-color':index.backgroundColor}">
<div ng-if="!index.anyOnGoingProcess && !index.notAuthorized"> <div ng-if="!index.anyOnGoingProcess && !index.notAuthorized">
<div ng-show="index.updateError" ng-click='index.openWallet()'> <div ng-show="index.updateError" ng-click='index.openWallet()'>
<span translate>Could not update Wallet</span> <span translate>Could not update Wallet</span>
<br><span translate>Tap to retry</span> <br><span translate>Tap to retry</span>
</div> </div>
<div ng-show="index.walletScanStatus == 'error'" ng-click='index.retryScan()'> <div ng-show="index.walletScanStatus == 'error'" ng-click='index.retryScan()'>
<span translate>Scan status finished with error</span> <span translate>Scan status finished with error</span>
<br><span translate>Tap to retry</span> <br><span translate>Tap to retry</span>
</div> </div>
@ -16,7 +16,7 @@
<div class="size-36 animated fadeIn"> <div class="size-36 animated fadeIn">
<strong>{{index.totalBalanceStr}}</strong> <strong>{{index.totalBalanceStr}}</strong>
</div> </div>
<div class="size-14" <div class="size-14"
ng-if="index.totalBalanceAlternative"> ng-if="index.totalBalanceAlternative">
<span ng-class="{'animated fadeIn':!index.hideBalance}"> <span ng-class="{'animated fadeIn':!index.hideBalance}">
{{index.totalBalanceAlternative}} {{index.alternativeIsoCode}} {{index.totalBalanceAlternative}} {{index.alternativeIsoCode}}
@ -32,9 +32,9 @@
</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-class="{'updating':index.anyOnGoingProcess}" ng-class="{'updating':index.anyOnGoingProcess}"
ng-style="{'background-color':index.backgroundColor}">{{index.walletName | limitTo: 1}}</div> ng-style="{'background-color':index.backgroundColor}">{{index.walletName | limitTo: 1}}</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>
@ -43,35 +43,32 @@
</div> </div>
<div class="wallet-info" ng-click="openCopayersModal(index.copayers, index.copayerId)"> <div class="wallet-info" ng-click="openCopayersModal(index.copayers, index.copayerId)">
<p class="m0"> <p class="m0">
{{index.m}} <span translate>of</span> {{index.n}} {{index.m}} <span translate>of</span> {{index.n}}
</p> </p>
<div class="size-12 text-gray"> <div class="size-12 text-gray">
<span ng-if="index.n > 1" translate>Multisignature wallet </span> <span ng-if="index.n > 1" translate>Multisignature wallet </span>
<span ng-if="index.n == 1" translate>Personal Wallet</span> <span ng-if="index.n == 1" translate>Personal Wallet</span>
<span ng-if="index.network != 'livenet'"> - Testnet</span> <span ng-if="index.network != 'livenet'"> - Testnet</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="onGoingProcess" ng-show="index.anyOnGoingProcess" ng-style="{'background-color':index.backgroundColor}"> <div class="onGoingProcess"
<div class="spinner"> ng-show="index.anyOnGoingProcess"
<div class="rect1"></div> ng-style="{'background-color':index.backgroundColor}"
<div class="rect2"></div> ng-class="{'opacityCycle':index.anyOnGoingProcess}"
<div class="rect3"></div> >
<div class="rect4"></div> <span translate ng-show="index.onGoingProcessName == 'openingWallet'">Opening Wallet...</span>
<div class="rect5"></div> <span translate ng-show="index.onGoingProcessName == 'updatingStatus'">Updating Status...</span>
</div> <span translate ng-show="index.onGoingProcessName == 'updatingBalance'">Updating Balance...</span>
<span translate ng-show="index.onGoingProcessName == 'openingWallet'"> Updating Wallet... </span> <span translate ng-show="index.onGoingProcessName == 'updatingPendingTxps'">Updating Pending Transactions...</span>
<span translate ng-show="index.onGoingProcessName == 'updatingStatus'"> Updating Status...</span>
<span translate ng-show="index.onGoingProcessName == 'updatingBalance'">Updating Wallet... </span>
<span translate ng-show="index.onGoingProcessName == 'updatingPendingTxps'">Updating Wallet...</span>
<span translate ng-show="index.onGoingProcessName == 'scanning'">Scanning Wallet funds...</span> <span translate ng-show="index.onGoingProcessName == 'scanning'">Scanning Wallet funds...</span>
<span translate ng-show="index.onGoingProcessName == 'recreating'">Recreating Wallet...</span> <span translate ng-show="index.onGoingProcessName == 'recreating'">Recreating Wallet on BWS...</span>
</div> </div>
<div class="m20t" ng-show="index.notAuthorized"> <div class="m20t" 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>
<span translate> <span translate>
WARNING: Wallet not registered WARNING: Wallet not registered
@ -81,7 +78,7 @@
This wallet is not registered at the given Bitcore Wallet Service (BWS). You can recreate it from the local information. This wallet is not registered at the given Bitcore Wallet Service (BWS). You can recreate it from the local information.
</div> </div>
<div class="text-center m10t "> <div class="text-center m10t ">
<span class="button outline dark-gray tiny" <span class="button outline dark-gray tiny"
ng-click="index.recreate()"> ng-click="index.recreate()">
<span translate>Recreate</span> <span translate>Recreate</span>
</span> </span>
@ -91,15 +88,15 @@
<div ng-show="index.requiresMultipleSignatures && index.txps[0]"> <div ng-show="index.requiresMultipleSignatures && index.txps[0]">
<h4 class="title m0" translate>Spend proposals</h4> <h4 class="title m0" translate>Spend proposals</h4>
<div class="last-transactions pr" ng-repeat="tx in index.txps" <div class="last-transactions pr" ng-repeat="tx in index.txps"
ng-include="'views/includes/transaction.html'"> ng-include="'views/includes/transaction.html'">
</div> </div>
<div class="text-gray text-center size-12 p10t" <div class="text-gray text-center size-12 p10t"
ng-show="index.lockedBalance && !index.updatingStatus"> ng-show="index.lockedBalance && !index.updatingStatus">
<span translate>Total Locked Balance</span>: <span translate>Total Locked Balance</span>:
<b>{{index.lockedBalance}} {{index.unitName}} </b> <b>{{index.lockedBalance}} {{index.unitName}} </b>
<span> {{index.lockedBalanceAlternative}} <span> {{index.lockedBalanceAlternative}}
{{index.alternativeIsoCode}} </span> {{index.alternativeIsoCode}} </span>
</div> </div>
@ -122,6 +119,7 @@
<button class="button black expand" ng-click="$root.go('add')" translate>Create</button> <button class="button black expand" ng-click="$root.go('add')" translate>Create</button>
</div> </div>
</div> </div>
<div class="extra-margin-bottom"></div> <div class="extra-margin-bottom"></div>

205
src/css/main.css
View file

@ -204,7 +204,7 @@ a.close-notification {
} }
ul.tx-copayers { ul.tx-copayers {
background: #E4E8EC; background: #E4E8EC;
padding: 0.3rem 0.8rem; padding: 0.3rem 0.8rem;
margin-left: 0; margin-left: 0;
box-shadow: inset 0 1px 1px 0 rgba(10,19,28,.12); box-shadow: inset 0 1px 1px 0 rgba(10,19,28,.12);
@ -316,9 +316,9 @@ ul.manage li {
.pa {position: absolute;} .pa {position: absolute;}
.m0 {margin: 0;} .m0 {margin: 0;}
.p0i {padding: 0 !important;} .p0i {padding: 0 !important;}
.db {display: block;} .db {display: block;}
.size-10 { font-size: 10px; } .size-10 { font-size: 10px; }
.size-12 { font-size: 12px; } .size-12 { font-size: 12px; }
.size-14 { font-size: 14px; } .size-14 { font-size: 14px; }
.size-16 { font-size: 16px; } .size-16 { font-size: 16px; }
.size-18 { font-size: 18px; } .size-18 { font-size: 18px; }
@ -422,25 +422,25 @@ ul.manage li {
} }
/* Turn Off Number Input Spinners */ /* Turn Off Number Input Spinners */
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
margin: 0; margin: 0;
} }
.spinner { .spinner {
display: inline-block; display: inline-block;
} }
.success { .success {
color: #1ABC9C; color: #1ABC9C;
} }
.bg-success { .bg-success {
background-color: #1ABC9C; background-color: #1ABC9C;
} }
.tx-proposal i { .tx-proposal i {
padding: .1rem .3rem; padding: .1rem .3rem;
background-color: #A5B2BF; background-color: #A5B2BF;
border-radius: 100%; border-radius: 100%;
@ -551,19 +551,19 @@ label small.has-error {
font-size: 11px; font-size: 11px;
} }
table { table {
border-collapse: collapse; border-collapse: collapse;
text-align: left; text-align: left;
width: 100%; width: 100%;
border: none; border: none;
} }
thead tr{ thead tr{
text-transform: uppercase; text-transform: uppercase;
} }
table tr td, table tr th { table tr td, table tr th {
padding: 15px; padding: 15px;
} }
table tr.even, table tr.alt, table tr:nth-of-type(even) { table tr.even, table tr.alt, table tr:nth-of-type(even) {
@ -571,17 +571,17 @@ table tr.even, table tr.alt, table tr:nth-of-type(even) {
} }
table tfoot tr td, table tfoot tr th, table thead tr td, table thead tr th { table tfoot tr td, table tfoot tr th, table thead tr td, table thead tr th {
background-color: #F5F5F8; background-color: #F5F5F8;
color:#949BAD; color:#949BAD;
font-weight: normal font-weight: normal
} }
table tbody td { table tbody td {
color: #7A8C9E; color: #7A8C9E;
border-bottom: 1px solid #F1F1F3; border-bottom: 1px solid #F1F1F3;
} }
table tbody tr:last-child td { table tbody tr:last-child td {
border-bottom: none; border-bottom: none;
} }
@ -627,81 +627,81 @@ button.outline.light-gray:focus {
} }
/* SECONDARY */ /* SECONDARY */
button.secondary, button.secondary,
button.secondary:hover, button.secondary:hover,
button.secondary:focus, button.secondary:focus,
.button.secondary, .button.secondary,
.button.secondary:hover, .button.secondary:hover,
.button.secondary:focus { .button.secondary:focus {
background-color: #008CC1; background-color: #008CC1;
color: #fff; color: #fff;
border-radius: 3px; border-radius: 3px;
} }
/* PRIMARY */ /* PRIMARY */
button.primary, button.primary,
button.primary:hover, button.primary:hover,
button.primary:focus, button.primary:focus,
.button.primary, .button.primary,
.button.primary:hover, .button.primary:hover,
.button.primary:focus { .button.primary:focus {
background-color: #1ABC9C; background-color: #1ABC9C;
color: #fff; color: #fff;
border-radius: 3px; border-radius: 3px;
} }
/* WARNING */ /* WARNING */
button.warning, button.warning,
.button.warning, .button.warning,
button.warning:hover, button.warning:hover,
button.warning:focus, button.warning:focus,
.button.warning:hover, .button.warning:hover,
.button.warning:focus { .button.warning:focus {
background-color: #ED4A43; background-color: #ED4A43;
color: #fff; color: #fff;
border-radius: 3px; border-radius: 3px;
} }
/* WHITE */ /* WHITE */
button.white, button.white,
.button.white { .button.white {
background-color: #fff; background-color: #fff;
color: #2C3E50; color: #2C3E50;
} }
/* BLACK */ /* BLACK */
button.black, button.black,
.button.black { .button.black {
background-color: #2C3E50; background-color: #2C3E50;
color: #fff; color: #fff;
} }
/* GRAY */ /* GRAY */
button.gray, button.gray,
.button.gray { .button.gray {
background-color: #A9B2B8; background-color: #A9B2B8;
color: #2C3E50; color: #2C3E50;
} }
button.disabled.black, button.disabled.black,
button[disabled].black, button[disabled].black,
.button.disabled.black, .button.disabled.black,
.button[disabled].black, .button[disabled].black,
button.disabled.white, button.disabled.white,
button[disabled].white, button[disabled].white,
.button.disabled.white, .button.disabled.white,
.button[disabled].white, .button[disabled].white,
button.disabled.warning, button.disabled.warning,
button[disabled].warning, button[disabled].warning,
.button.disabled.warning, .button.disabled.warning,
.button[disabled].warning, .button[disabled].warning,
button.disabled.primary, button.disabled.primary,
button[disabled].primary, button[disabled].primary,
.button.disabled.primary, .button.disabled.primary,
.button[disabled].primary, .button[disabled].primary,
button.disabled.secondary, button.disabled.secondary,
button[disabled].secondary, button[disabled].secondary,
.button.disabled.secondary, .button.disabled.secondary,
.button[disabled].secondary { .button[disabled].secondary {
background-color: #A5B2BF !important; background-color: #A5B2BF !important;
color: #fff; color: #fff;
@ -1124,7 +1124,7 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
/* Generated with Bounce.js. Edit at http://goo.gl/Vn2Euz */ /* Generated with Bounce.js. Edit at http://goo.gl/Vn2Euz */
@-webkit-keyframes up-animation { @-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); } 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); } 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); } 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); }
@ -1150,11 +1150,11 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
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); } 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); } 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); } 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); } 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); }
} }
@keyframes up-animation { @keyframes up-animation {
0% { 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); } 0% { 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% { 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); } 3.4% { 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% { 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); } 4.7% { 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); }
@ -1180,7 +1180,7 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
75.28% { 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); } 75.28% { 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% { 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); } 85.49% { 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% { 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); } 90.69% { 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% { 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% { 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); }
} }
@ -1191,77 +1191,32 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
-webkit-animation-iteration-count: infinite; -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 { .onGoingProcess {
background: #213140;
text-align: center; text-align: center;
max-width: 14.5rem; max-width: 14.5rem;
max-height: 3.5rem; max-height: 2rem;
top:auto; top:auto;
left:0; left:0;
right:0; right:0;
bottom:90px; bottom:90px;
margin: auto; margin: auto;
border-radius: 3px; border-radius: 3px;
color: #fff; color: #fff;
padding: 0.5rem; padding: 0.3rem 0.5rem;
font-size: 13px; font-size: 14px;
position: absolute; position: absolute;
opacity: 0.8; background:#DDD;
}
/*/////////////////// SPINNER ////////////////////*/
.spinner {
margin: 0 auto;
width: 35px;
height: 27px;
text-align: center;
font-size: 10px;
vertical-align: middle;
}
.spinner > div {
background-color: #fff;
height: 100%;
width: 2px;
display: inline-block;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
} }