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

status notifications

Browse source
This commit is contained in:
bechi 2015-04-23 16:54:19 -03:00
commit 1a5dc6a468
2 changed files with 178 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

110
public/views/walletHome.html
View file

@ -3,19 +3,19 @@
<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>
<div ng-show="!index.updateError && index.walletScanStatus != 'error'"> <div ng-show="!index.updateError && index.walletScanStatus != 'error'">
<strong class="size-36">{{index.totalBalanceStr}}</strong> <strong class="size-36">{{index.totalBalanceStr}}</strong>
<div class="size-14" <div class="size-14"
ng-if="index.totalBalanceAlternative"> ng-if="index.totalBalanceAlternative">
{{index.totalBalanceAlternative}} {{index.alternativeIsoCode}} {{index.totalBalanceAlternative}} {{index.alternativeIsoCode}}
</div> </div>
@ -29,8 +29,8 @@
</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-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>
@ -39,32 +39,35 @@
</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" <div class="onGoingProcess" ng-show="index.anyOnGoingProcess" ng-style="{'background-color':index.backgroundColor}">
ng-show="index.anyOnGoingProcess" <div class="spinner">
ng-style="{'background-color':index.backgroundColor}" <div class="rect1"></div>
ng-class="{'opacityCycle':index.anyOnGoingProcess}" <div class="rect2"></div>
> <div class="rect3"></div>
<span translate ng-show="index.onGoingProcessName == 'openingWallet'">Opening Wallet...</span> <div class="rect4"></div>
<span translate ng-show="index.onGoingProcessName == 'updatingStatus'">Updating Status...</span> <div class="rect5"></div>
<span translate ng-show="index.onGoingProcessName == 'updatingBalance'">Updating Balance...</span> </div>
<span translate ng-show="index.onGoingProcessName == 'updatingPendingTxps'">Updating Pending Transactions...</span> <span translate ng-show="index.onGoingProcessName == 'openingWallet'"> Updating Wallet... </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 on BWS...</span> <span translate ng-show="index.onGoingProcessName == 'recreating'">Recreating Wallet...</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
@ -74,7 +77,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>
@ -84,15 +87,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>
@ -111,13 +114,13 @@
<!-- <!--
receive receive
--> -->
<div id="receive" class="receive tab-view"> <div id="receive" class="receive tab-view">
<div ng-show="index.needsBackup && !home.skipBackup" class="p60t row text-center"> <div ng-show="index.needsBackup && !home.skipBackup" class="p60t row text-center">
<div class="text-warning text-bold m15b"> <div class="text-warning text-bold m15b">
<i class="fi-alert"></i> <i class="fi-alert"></i>
<span translate> <span translate>
WARNING: Backup needed WARNING: Backup needed
@ -128,13 +131,13 @@
</div> </div>
<div class="small-6 columns m20t"> <div class="small-6 columns m20t">
<span class="button expand outline dark-gray tiny" <span class="button expand outline dark-gray tiny"
ng-click="home.skipBackup = true"> ng-click="home.skipBackup = true">
<span translate>SKIP BACKUP</span> <span translate>SKIP BACKUP</span>
</span> </span>
</div> </div>
<div class="small-6 columns m20t"> <div class="small-6 columns m20t">
<span class="button black expand radius tiny" <span class="button black expand radius tiny"
ng-click="$root.go('backup')" ng-style="{'background-color':index.backgroundColor}" > ng-click="$root.go('backup')" ng-style="{'background-color':index.backgroundColor}" >
<span translate>Backup now</span> <span translate>Backup now</span>
</span> </span>
@ -157,9 +160,9 @@
</div> </div>
</div> </div>
<div class="m10t text-center" ng-show="index.isCordova"> <div class="m10t text-center" ng-show="index.isCordova">
<span class="button outline dark-gray tiny" <span class="button outline dark-gray tiny"
ng-click="home.shareAddress(home.addr)"> ng-click="home.shareAddress(home.addr)">
<i class="fi-share"></i> <i class="fi-share"></i>
<span translate>Share address</span> <span translate>Share address</span>
</span> </span>
</div> </div>
@ -170,7 +173,7 @@
</div> </div>
<div class="row m20t" ng-if="home.addr"> <div class="row m20t" ng-if="home.addr">
<div class="large-12 columns"> <div class="large-12 columns">
<button class="button black expand radius" ng-click="home.newAddress()" <button class="button black expand radius" ng-click="home.newAddress()"
ng-style="{'background-color':index.backgroundColor}" ng-disabled="home.generatingAddress" translate> ng-style="{'background-color':index.backgroundColor}" ng-disabled="home.generatingAddress" translate>
Generate new address Generate new address
</button> </button>
@ -181,7 +184,7 @@
</div> </div>
<!-- <!--
send send
@ -194,18 +197,18 @@
</div> </div>
<div class="size-12"> <div class="size-12">
<span class="db text-bold"> <span class="db text-bold">
<span translate>Available Balance</span>: <span translate>Available Balance</span>:
{{index.availableBalanceStr }} {{index.availableBalanceStr }}
</span> </span>
<span class="text-gray"> <span class="text-gray">
{{index.lockedBalanceStr}} {{index.lockedBalanceStr}}
<span translate>in pending transactions</span> <span translate>in pending transactions</span>
</span> </span>
</div> </div>
</h4> </h4>
</div> </div>
<div class="row m20t"> <div class="row m20t">
<div class="large-12 large-centered columns"> <div class="large-12 large-centered columns">
<div class="box-notification" ng-show="home.fetchingURL"> <div class="box-notification" ng-show="home.fetchingURL">
<span class="text-secondary size-14" translate> <span class="text-secondary size-14" translate>
Fetching Payment Information... Fetching Payment Information...
@ -223,7 +226,7 @@
<div class="row collapse"> <div class="row collapse">
<label for="address" class="left" > <label for="address" class="left" >
<span translate>To</span> <span translate>To</span>
</label> </label>
<span ng-hide="sendForm.address.$pristine"> <span ng-hide="sendForm.address.$pristine">
@ -247,13 +250,13 @@
<div class="row collapse" ng-click="home.openPPModal(home._paypro)"> <div class="row collapse" ng-click="home.openPPModal(home._paypro)">
<label for="domain"> <label for="domain">
<span translate>Payment to</span> <span translate>Payment to</span>
</label> </label>
<div class="input block"> <div class="input block">
<input class="p45li" type="text" id="domain" name="domain" ng-model="home._paypro.domain" ng-disabled="1"> <input class="p45li" type="text" id="domain" name="domain" ng-model="home._paypro.domain" ng-disabled="1">
<i ng-show="home._paypro.verified" class="fi-lock color-greeni"></i> <i ng-show="home._paypro.verified" class="fi-lock color-greeni"></i>
<i ng-show="!home._paypro.verified" class="fi-unlock color-yellowi"></i> <i ng-show="!home._paypro.verified" class="fi-unlock color-yellowi"></i>
</div> </div>
</div> </div>
</div> </div>
@ -296,14 +299,14 @@
<small translate class="has-error" ng-show="sendForm.comment.$invalid && !sendForm.comment.$pristine">too long!</small> <small translate class="has-error" ng-show="sendForm.comment.$invalid && !sendForm.comment.$pristine">too long!</small>
</label> </label>
<div class="input"> <div class="input">
<textarea id="comment" ng-disabled="home.blockUx" name="comment" <textarea id="comment" ng-disabled="home.blockUx" name="comment"
ng-maxlength="100" ng-model="_comment" ng-focus="home.formFocus('msg')" ng-maxlength="100" ng-model="_comment" ng-focus="home.formFocus('msg')"
ng-blur="home.formFocus(false)"></textarea> ng-blur="home.formFocus(false)"></textarea>
</div> </div>
</div> </div>
</div> </div>
<div ng-if="home.onGoingProcess" class="text-gray text-center m10t"> <div ng-if="home.onGoingProcess" class="text-gray text-center m10t">
<span class="animated infinite flash">{{home.onGoingProcess|translate}}...</span> <span class="animated infinite flash">{{home.onGoingProcess|translate}}...</span>
</div> </div>
@ -314,12 +317,12 @@
<a ng-click="home.resetForm(sendForm)" class="button expand outline dark-gray" translate>Cancel</a> <a ng-click="home.resetForm(sendForm)" class="button expand outline dark-gray" translate>Cancel</a>
</div> </div>
<div class="columns" ng-class="{'small-6 medium-6 large-6':(home._paypro || home.lockAddress)}"> <div class="columns" ng-class="{'small-6 medium-6 large-6':(home._paypro || home.lockAddress)}">
<button type="submit" class="button black radius expand" ng-disabled="sendForm.$invalid || home.blockUx" <button type="submit" class="button black radius expand" ng-disabled="sendForm.$invalid || home.blockUx"
ng-style="{'background-color':index.backgroundColor}" translate> ng-style="{'background-color':index.backgroundColor}" translate>
Send Send
</button> </button>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
@ -327,9 +330,9 @@
<!-- end of row --> <!-- end of row -->
</div> </div>
<!-- <!--
history history
--> -->
<div id="history" class="history tab-view"> <div id="history" class="history tab-view">
@ -338,7 +341,7 @@ history
<div class="oh text-center"> <div class="oh text-center">
<span ng-if="index.updatingTxHistory" class="text-gray animated flash infinite" translate>Getting transactions...</span> <span ng-if="index.updatingTxHistory" class="text-gray animated flash infinite" translate>Getting transactions...</span>
<span ng-if="!index.updatingTxHistory"> <span ng-if="!index.updatingTxHistory">
<span ng-show="index.txHistoryError && !index.notAuthorized" ng-click='index.openWallet()'> <span ng-show="index.txHistoryError && !index.notAuthorized" ng-click='index.openWallet()'>
<span translate>Could not fetch transaction history</span> <span translate>Could not fetch transaction history</span>
<br> [<span translate>Tap to retry</span>] <br> [<span translate>Tap to retry</span>]
</span> </span>
@ -350,11 +353,11 @@ history
</div> </div>
</div> </div>
<div ng-show="index.txHistory[0]" class="scroll"> <div ng-show="index.txHistory[0]" class="scroll">
<div ng-repeat="btx in index.txHistory" <div ng-repeat="btx in index.txHistory"
ng-click="home.openTxModal(btx)" ng-click="home.openTxModal(btx)"
class="row collapse last-transactions-content"> class="row collapse last-transactions-content">
<div class="large-3 medium-3 small-3 columns"> <div class="large-3 medium-3 small-3 columns">
<span class="label tu radius" ng-show="btx.action == 'received'" <span class="label tu radius" ng-show="btx.action == 'received'"
ng-style="{'background-color':index.backgroundColor}" translate>Received</span> ng-style="{'background-color':index.backgroundColor}" translate>Received</span>
<span class="label tu gray radius" ng-show="btx.action == 'sent'" translate>Sent</span> <span class="label tu gray radius" ng-show="btx.action == 'sent'" translate>Sent</span>
<span class="label tu gray radius" ng-show="btx.action == 'moved'" translate>Moved</span> <span class="label tu gray radius" ng-show="btx.action == 'moved'" translate>Moved</span>
@ -371,7 +374,7 @@ history
<div class="large-4 medium-4 small-4 columns text-right"> <div class="large-4 medium-4 small-4 columns text-right">
<div class="m5t size-12 text-gray"> <div class="m5t size-12 text-gray">
<time ng-if="btx.time">{{btx.time * 1000 | amTimeAgo}}</time> <time ng-if="btx.time">{{btx.time * 1000 | amTimeAgo}}</time>
<span translate class="text-warning" <span translate class="text-warning"
ng-show="!btx.time && (!btx.confirmations || btx.confirmations == 0)"> ng-show="!btx.time && (!btx.confirmations || btx.confirmations == 0)">
Unconfirmed Unconfirmed
</span> </span>
@ -407,7 +410,6 @@ history
<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>

186
src/css/main.css
View file

@ -205,7 +205,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);
@ -317,9 +317,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; }
@ -423,25 +423,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%;
@ -552,19 +552,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) {
@ -572,17 +572,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;
} }
@ -628,81 +628,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;
@ -1108,18 +1108,76 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
} }
.onGoingProcess { .onGoingProcess {
background: #213140;
text-align: center; text-align: center;
max-width: 14.5rem; max-width: 14.5rem;
max-height: 2rem; max-height: 3.5rem;
top:auto; top:auto;
left:0; left:0;
right:0; right:0;
bottom: 130px; bottom:90px;
margin: auto; margin: auto;
border-radius: 3px; border-radius: 3px;
color: #fff; color: #fff;
padding: 0.3rem 0.5rem; padding: 0.5rem;
font-size: 14px; font-size: 13px;
position: absolute; position: absolute;
background:#DDD; opacity: 0.8;
}
/*/////////////////// 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);
}
} }