Merge pull request #2601 from bechi/layout-details-10
status notifications
This commit is contained in:
Gustavo Maximiliano Cortez
commit
67b68d3302
2 changed files with 178 additions and 118 deletions
|
|
@ -3,19 +3,19 @@
|
|||
<div class="oh" ng-show="!index.noFocusedWallet">
|
||||
<div class="amount" ng-style="{'background-color':index.backgroundColor}">
|
||||
<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>
|
||||
<br><span translate>Tap to retry</span>
|
||||
</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>
|
||||
<br><span translate>Tap to retry</span>
|
||||
</div>
|
||||
|
||||
<div ng-show="!index.updateError && index.walletScanStatus != 'error'">
|
||||
<strong class="size-36">{{index.totalBalanceStr}}</strong>
|
||||
<div class="size-14"
|
||||
<div class="size-14"
|
||||
ng-if="index.totalBalanceAlternative">
|
||||
{{index.totalBalanceAlternative}} {{index.alternativeIsoCode}}
|
||||
</div>
|
||||
|
|
@ -29,8 +29,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="pr columns line-b">
|
||||
<div class="avatar-wallet left"
|
||||
ng-style="{'background-color':index.backgroundColor}">{{index.walletName | limitTo: 1}}</div>
|
||||
<div class="avatar-wallet left"
|
||||
ng-style="{'background-color':index.backgroundColor}">{{index.walletName | limitTo: 1}}</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>
|
||||
|
|
@ -39,32 +39,35 @@
|
|||
</div>
|
||||
<div class="wallet-info" ng-click="openCopayersModal(index.copayers, index.copayerId)">
|
||||
<p class="m0">
|
||||
{{index.m}} <span translate>of</span> {{index.n}}
|
||||
{{index.m}} <span translate>of</span> {{index.n}}
|
||||
</p>
|
||||
<div class="size-12 text-gray">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="onGoingProcess"
|
||||
ng-show="index.anyOnGoingProcess"
|
||||
ng-style="{'background-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>
|
||||
<div class="onGoingProcess" ng-show="index.anyOnGoingProcess" ng-style="{'background-color':index.backgroundColor}">
|
||||
<div class="spinner">
|
||||
<div class="rect1"></div>
|
||||
<div class="rect2"></div>
|
||||
<div class="rect3"></div>
|
||||
<div class="rect4"></div>
|
||||
<div class="rect5"></div>
|
||||
</div>
|
||||
<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 == 'recreating'">Recreating Wallet on BWS...</span>
|
||||
<span translate ng-show="index.onGoingProcessName == 'recreating'">Recreating Wallet...</span>
|
||||
</div>
|
||||
|
||||
<div class="m20t" ng-show="index.notAuthorized">
|
||||
<div class="text-center text-warning">
|
||||
<div class="m20t" ng-show="index.notAuthorized">
|
||||
<div class="text-center text-warning">
|
||||
<i class="fi-alert"></i>
|
||||
<span translate>
|
||||
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.
|
||||
</div>
|
||||
<div class="text-center m10t ">
|
||||
<span class="button outline dark-gray tiny"
|
||||
<span class="button outline dark-gray tiny"
|
||||
ng-click="index.recreate()">
|
||||
<span translate>Recreate</span>
|
||||
</span>
|
||||
|
|
@ -84,15 +87,15 @@
|
|||
|
||||
<div ng-show="index.requiresMultipleSignatures && index.txps[0]">
|
||||
<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'">
|
||||
</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">
|
||||
<span translate>Total Locked Balance</span>:
|
||||
<b>{{index.lockedBalance}} {{index.unitName}} </b>
|
||||
<span> {{index.lockedBalanceAlternative}}
|
||||
<b>{{index.lockedBalance}} {{index.unitName}} </b>
|
||||
<span> {{index.lockedBalanceAlternative}}
|
||||
{{index.alternativeIsoCode}} </span>
|
||||
</div>
|
||||
|
||||
|
|
@ -111,13 +114,13 @@
|
|||
|
||||
<!--
|
||||
|
||||
receive
|
||||
receive
|
||||
|
||||
-->
|
||||
<div id="receive" class="receive tab-view">
|
||||
|
||||
<div ng-show="index.needsBackup && !home.skipBackup" class="p60t row text-center">
|
||||
<div class="text-warning text-bold m15b">
|
||||
<div ng-show="index.needsBackup && !home.skipBackup" class="p60t row text-center">
|
||||
<div class="text-warning text-bold m15b">
|
||||
<i class="fi-alert"></i>
|
||||
<span translate>
|
||||
WARNING: Backup needed
|
||||
|
|
@ -128,13 +131,13 @@
|
|||
</div>
|
||||
|
||||
<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">
|
||||
<span translate>SKIP BACKUP</span>
|
||||
</span>
|
||||
</div>
|
||||
<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}" >
|
||||
<span translate>Backup now</span>
|
||||
</span>
|
||||
|
|
@ -157,9 +160,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<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)">
|
||||
<i class="fi-share"></i>
|
||||
<i class="fi-share"></i>
|
||||
<span translate>Share address</span>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -170,7 +173,7 @@
|
|||
</div>
|
||||
<div class="row m20t" ng-if="home.addr">
|
||||
<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>
|
||||
Generate new address
|
||||
</button>
|
||||
|
|
@ -181,7 +184,7 @@
|
|||
</div>
|
||||
|
||||
|
||||
<!--
|
||||
<!--
|
||||
|
||||
send
|
||||
|
||||
|
|
@ -194,18 +197,18 @@
|
|||
</div>
|
||||
<div class="size-12">
|
||||
<span class="db text-bold">
|
||||
<span translate>Available Balance</span>:
|
||||
<span translate>Available Balance</span>:
|
||||
{{index.availableBalanceStr }}
|
||||
</span>
|
||||
<span class="text-gray">
|
||||
{{index.lockedBalanceStr}}
|
||||
{{index.lockedBalanceStr}}
|
||||
<span translate>in pending transactions</span>
|
||||
</span>
|
||||
</div>
|
||||
</h4>
|
||||
</div>
|
||||
<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">
|
||||
<span class="text-secondary size-14" translate>
|
||||
Fetching Payment Information...
|
||||
|
|
@ -223,7 +226,7 @@
|
|||
<div class="row collapse">
|
||||
|
||||
<label for="address" class="left" >
|
||||
<span translate>To</span>
|
||||
<span translate>To</span>
|
||||
</label>
|
||||
|
||||
<span ng-hide="sendForm.address.$pristine">
|
||||
|
|
@ -247,13 +250,13 @@
|
|||
<div class="row collapse" ng-click="home.openPPModal(home._paypro)">
|
||||
|
||||
<label for="domain">
|
||||
<span translate>Payment to</span>
|
||||
<span translate>Payment to</span>
|
||||
</label>
|
||||
|
||||
<div class="input block">
|
||||
<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-unlock color-yellowi"></i>
|
||||
<i ng-show="!home._paypro.verified" class="fi-unlock color-yellowi"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -296,14 +299,14 @@
|
|||
<small translate class="has-error" ng-show="sendForm.comment.$invalid && !sendForm.comment.$pristine">too long!</small>
|
||||
</label>
|
||||
<div class="input">
|
||||
<textarea id="comment" ng-disabled="home.blockUx" name="comment"
|
||||
ng-maxlength="100" ng-model="_comment" ng-focus="home.formFocus('msg')"
|
||||
<textarea id="comment" ng-disabled="home.blockUx" name="comment"
|
||||
ng-maxlength="100" ng-model="_comment" ng-focus="home.formFocus('msg')"
|
||||
ng-blur="home.formFocus(false)"></textarea>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
|
|
@ -314,12 +317,12 @@
|
|||
<a ng-click="home.resetForm(sendForm)" class="button expand outline dark-gray" translate>Cancel</a>
|
||||
</div>
|
||||
<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>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -327,9 +330,9 @@
|
|||
<!-- end of row -->
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<!--
|
||||
|
||||
history
|
||||
history
|
||||
|
||||
-->
|
||||
<div id="history" class="history tab-view">
|
||||
|
|
@ -338,7 +341,7 @@ history
|
|||
<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">
|
||||
<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>
|
||||
<br> [<span translate>Tap to retry</span>]
|
||||
</span>
|
||||
|
|
@ -350,11 +353,11 @@ history
|
|||
</div>
|
||||
</div>
|
||||
<div ng-show="index.txHistory[0]" class="scroll">
|
||||
<div ng-repeat="btx in index.txHistory"
|
||||
ng-click="home.openTxModal(btx)"
|
||||
<div ng-repeat="btx in index.txHistory"
|
||||
ng-click="home.openTxModal(btx)"
|
||||
class="row collapse last-transactions-content">
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -371,7 +374,7 @@ history
|
|||
<div class="large-4 medium-4 small-4 columns text-right">
|
||||
<div class="m5t size-12 text-gray">
|
||||
<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)">
|
||||
Unconfirmed
|
||||
</span>
|
||||
|
|
@ -407,7 +410,6 @@ history
|
|||
<button class="button black expand" ng-click="$root.go('add')" translate>Create</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="extra-margin-bottom"></div>
|
||||
|
||||
|
|
|
|||
186
src/css/main.css
186
src/css/main.css
|
|
@ -205,7 +205,7 @@ a.close-notification {
|
|||
}
|
||||
|
||||
ul.tx-copayers {
|
||||
background: #E4E8EC;
|
||||
background: #E4E8EC;
|
||||
padding: 0.3rem 0.8rem;
|
||||
margin-left: 0;
|
||||
box-shadow: inset 0 1px 1px 0 rgba(10,19,28,.12);
|
||||
|
|
@ -317,9 +317,9 @@ ul.manage li {
|
|||
.pa {position: absolute;}
|
||||
.m0 {margin: 0;}
|
||||
.p0i {padding: 0 !important;}
|
||||
.db {display: block;}
|
||||
.size-10 { font-size: 10px; }
|
||||
.size-12 { font-size: 12px; }
|
||||
.db {display: block;}
|
||||
.size-10 { font-size: 10px; }
|
||||
.size-12 { font-size: 12px; }
|
||||
.size-14 { font-size: 14px; }
|
||||
.size-16 { font-size: 16px; }
|
||||
.size-18 { font-size: 18px; }
|
||||
|
|
@ -423,25 +423,25 @@ ul.manage li {
|
|||
}
|
||||
|
||||
/* Turn Off Number Input Spinners */
|
||||
input[type=number]::-webkit-inner-spin-button,
|
||||
input[type=number]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
input[type=number]::-webkit-inner-spin-button,
|
||||
input[type=number]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.success {
|
||||
.success {
|
||||
color: #1ABC9C;
|
||||
}
|
||||
|
||||
.bg-success {
|
||||
.bg-success {
|
||||
background-color: #1ABC9C;
|
||||
}
|
||||
|
||||
.tx-proposal i {
|
||||
.tx-proposal i {
|
||||
padding: .1rem .3rem;
|
||||
background-color: #A5B2BF;
|
||||
border-radius: 100%;
|
||||
|
|
@ -552,19 +552,19 @@ label small.has-error {
|
|||
font-size: 11px;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
thead tr{
|
||||
text-transform: uppercase;
|
||||
thead tr{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
table tr td, table tr th {
|
||||
padding: 15px;
|
||||
table tr td, table tr th {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
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 {
|
||||
background-color: #F5F5F8;
|
||||
color:#949BAD;
|
||||
background-color: #F5F5F8;
|
||||
color:#949BAD;
|
||||
font-weight: normal
|
||||
}
|
||||
|
||||
table tbody td {
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
@ -628,81 +628,81 @@ button.outline.light-gray:focus {
|
|||
}
|
||||
|
||||
/* SECONDARY */
|
||||
button.secondary,
|
||||
button.secondary:hover,
|
||||
button.secondary:focus,
|
||||
.button.secondary,
|
||||
button.secondary,
|
||||
button.secondary:hover,
|
||||
button.secondary:focus,
|
||||
.button.secondary,
|
||||
.button.secondary:hover,
|
||||
.button.secondary:focus {
|
||||
.button.secondary:focus {
|
||||
background-color: #008CC1;
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* PRIMARY */
|
||||
button.primary,
|
||||
button.primary:hover,
|
||||
button.primary:focus,
|
||||
button.primary,
|
||||
button.primary:hover,
|
||||
button.primary:focus,
|
||||
.button.primary,
|
||||
.button.primary:hover,
|
||||
.button.primary:focus {
|
||||
.button.primary:focus {
|
||||
background-color: #1ABC9C;
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* WARNING */
|
||||
button.warning,
|
||||
button.warning,
|
||||
.button.warning,
|
||||
button.warning:hover,
|
||||
button.warning:focus,
|
||||
.button.warning:hover,
|
||||
.button.warning:focus {
|
||||
button.warning:hover,
|
||||
button.warning:focus,
|
||||
.button.warning:hover,
|
||||
.button.warning:focus {
|
||||
background-color: #ED4A43;
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* WHITE */
|
||||
button.white,
|
||||
.button.white {
|
||||
button.white,
|
||||
.button.white {
|
||||
background-color: #fff;
|
||||
color: #2C3E50;
|
||||
}
|
||||
|
||||
/* BLACK */
|
||||
button.black,
|
||||
.button.black {
|
||||
button.black,
|
||||
.button.black {
|
||||
background-color: #2C3E50;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* GRAY */
|
||||
button.gray,
|
||||
.button.gray {
|
||||
button.gray,
|
||||
.button.gray {
|
||||
background-color: #A9B2B8;
|
||||
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.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.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 {
|
||||
background-color: #A5B2BF !important;
|
||||
color: #fff;
|
||||
|
|
@ -1108,18 +1108,76 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
|
|||
}
|
||||
|
||||
.onGoingProcess {
|
||||
background: #213140;
|
||||
text-align: center;
|
||||
max-width: 14.5rem;
|
||||
max-height: 2rem;
|
||||
max-height: 3.5rem;
|
||||
top:auto;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom: 130px;
|
||||
bottom:90px;
|
||||
margin: auto;
|
||||
border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
padding: 0.3rem 0.5rem;
|
||||
font-size: 14px;
|
||||
padding: 0.5rem;
|
||||
font-size: 13px;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue