mirror of https://github.com/BTCPrivate/copay.git
fix loading screen & spinner
This commit is contained in:
parent
b7401985cf
commit
55b31e64cd
|
@ -1367,18 +1367,6 @@ a.text-warning:hover {color: #FD7262;}
|
|||
background-color: #1ABC9C;
|
||||
}
|
||||
|
||||
.loading-screen {
|
||||
text-align: center;
|
||||
background-color: #1ABC9C;
|
||||
width: 100%;
|
||||
margin-top: 15%;
|
||||
}
|
||||
|
||||
.loading-screen .spinner {
|
||||
vertical-align: middle;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.box-setup .panel {
|
||||
background-color: #2C3E50;
|
||||
padding: 1rem;
|
||||
|
@ -1538,3 +1526,60 @@ a.text-warning:hover {color: #FD7262;}
|
|||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
/*///////////////////////// LOADING /////////////////////////*/
|
||||
.contener_mixte {
|
||||
width:44px; height:44px; position:absolute;
|
||||
}
|
||||
|
||||
.ballcolor {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.contener_general {
|
||||
width:44px; height:44px;
|
||||
margin: 20px auto 20px;
|
||||
}
|
||||
|
||||
.ball_1, .ball_2, .ball_3, .ball_4 {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ball_1 {
|
||||
background-color:#3498DB;
|
||||
top:0; left:0;
|
||||
}
|
||||
|
||||
.ball_2 {
|
||||
background-color:#C0392A;
|
||||
top:0; left:24px;
|
||||
}
|
||||
|
||||
.ball_3 {
|
||||
background-color:#00a096;
|
||||
top:24px; left:0;
|
||||
}
|
||||
|
||||
.ball_4 {
|
||||
background-color:#2C3E50;
|
||||
top:24px; left:24px;
|
||||
}
|
||||
|
||||
.fond{position:absolute;padding-top:85px;top:0;left:0; right:0;bottom:0;}
|
||||
|
||||
.loading-screen {
|
||||
background-color: #F2F5F8;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.loading-screen .spinner {
|
||||
margin-top: 20%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
|
@ -96,6 +96,21 @@
|
|||
content: "\e60e";
|
||||
}
|
||||
|
||||
|
||||
.contener_general {
|
||||
-webkit-animation:animball_two 1s infinite;
|
||||
-moz-animation:animball_two 1s infinite;
|
||||
-ms-animation:animball_two 1s infinite;
|
||||
animation:animball_two 1s infinite;
|
||||
}
|
||||
|
||||
.ball_1, .ball_2, .ball_3, .ball_4 {
|
||||
-webkit-animation:animball_one 1s infinite ease;
|
||||
-moz-animation:animball_one 1s infinite ease;
|
||||
-ms-animation:animball_one 1s infinite ease;
|
||||
animation:animball_one 1s infinite ease;
|
||||
}
|
||||
|
||||
.side-nav.wallets {
|
||||
-webkit-transition: height 250ms ease-in;
|
||||
-moz-transition: height 250ms ease-in;
|
||||
|
@ -1361,3 +1376,53 @@ stretchRight
|
|||
-ms-transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes animball_one
|
||||
{
|
||||
0%{ position: absolute;}
|
||||
50%{top:12px; left:12px; position: absolute;opacity:0.5;}
|
||||
100%{ position: absolute;}
|
||||
}
|
||||
@-moz-keyframes animball_one
|
||||
{
|
||||
0%{ position: absolute;}
|
||||
50%{top:12px; left:12px; position: absolute;opacity:0.5;}
|
||||
100%{ position: absolute;}
|
||||
}
|
||||
@-ms-keyframes animball_one
|
||||
{
|
||||
0%{ position: absolute;}
|
||||
50%{top:12px; left:12px; position: absolute;opacity:0.5;}
|
||||
100%{ position: absolute;}
|
||||
}
|
||||
@keyframes animball_one
|
||||
{
|
||||
0%{ position: absolute;}
|
||||
50%{top:12px; left:12px; position: absolute;opacity:0.5;}
|
||||
100%{ position: absolute;}
|
||||
}
|
||||
|
||||
@-webkit-keyframes animball_two
|
||||
{
|
||||
0%{-webkit-transform:rotate(0deg) scale(1);}
|
||||
50%{-webkit-transform:rotate(360deg) scale(1.3);}
|
||||
100%{-webkit-transform:rotate(720deg) scale(1);}
|
||||
}
|
||||
@-moz-keyframes animball_two
|
||||
{
|
||||
0%{-moz-transform:rotate(0deg) scale(1);}
|
||||
50%{-moz-transform:rotate(360deg) scale(1.3);}
|
||||
100%{-moz-transform:rotate(720deg) scale(1);}
|
||||
}
|
||||
@-ms-keyframes animball_two
|
||||
{
|
||||
0%{-ms-transform:rotate(0deg) scale(1);}
|
||||
50%{-ms-transform:rotate(360deg) scale(1.3);}
|
||||
100%{-ms-transform:rotate(720deg) scale(1);}
|
||||
}
|
||||
@keyframes animball_two
|
||||
{
|
||||
0%{transform:rotate(0deg) scale(1);}
|
||||
50%{transform:rotate(360deg) scale(1.3);}
|
||||
100%{transform:rotate(720deg) scale(1);}
|
||||
}
|
15
index.html
15
index.html
|
@ -25,10 +25,19 @@
|
|||
<img src="img/ajax-loader.gif" alt="Loading...">
|
||||
</div>
|
||||
<div ng-cloak class="page ng-cloak">
|
||||
<div data-alert class="loading-screen" ng-show="signingOut">
|
||||
<i class="size-60 fi-bitcoin-circle icon-rotate spinner"></i>
|
||||
<span translate>Logging Out</span>
|
||||
|
||||
<div class="loading-screen" ng-show="signingOut">
|
||||
<div class="spinner">
|
||||
<div class="contener_general">
|
||||
<div class="contener_mixte"><div class="ballcolor ball_1"> </div></div>
|
||||
<div class="contener_mixte"><div class="ballcolor ball_2"> </div></div>
|
||||
<div class="contener_mixte"><div class="ballcolor ball_3"> </div></div>
|
||||
<div class="contener_mixte"><div class="ballcolor ball_4"> </div></div>
|
||||
</div>
|
||||
<span class="text-gray size-12" translate>Logging Out</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="off-canvas-wrap" ng-show="!signingOut">
|
||||
<div class="inner-wrap">
|
||||
<span class="status" ng-if="$root.reconnecting">
|
||||
|
|
|
@ -1,7 +1,14 @@
|
|||
<div ng-controller="CreateController">
|
||||
<div data-alert class="loading-screen" ng-show="loading">
|
||||
<i class="size-60 fi-bitcoin-circle icon-rotate spinner"></i>
|
||||
<span translate>Creating wallet...</span>
|
||||
<div class="spinner">
|
||||
<div class="contener_general">
|
||||
<div class="contener_mixte"><div class="ballcolor ball_1"> </div></div>
|
||||
<div class="contener_mixte"><div class="ballcolor ball_2"> </div></div>
|
||||
<div class="contener_mixte"><div class="ballcolor ball_3"> </div></div>
|
||||
<div class="contener_mixte"><div class="ballcolor ball_4"> </div></div>
|
||||
</div>
|
||||
<span class="text-gray size-12" translate>Creating Wallet...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setup" ng-show="!loading && !$root.starting">
|
||||
<h1 class="hide-for-large-up">{{$root.title}}</h1>
|
||||
|
|
|
@ -1,7 +1,15 @@
|
|||
<div class="createProfile" ng-controller="CreateProfileController">
|
||||
|
||||
<div data-alert class="loading-screen" ng-show="loading">
|
||||
<i class="size-60 fi-bitcoin-circle icon-rotate spinner"></i>
|
||||
<span translate>Creating profile...</span>
|
||||
<div class="spinner">
|
||||
<div class="contener_general">
|
||||
<div class="contener_mixte"><div class="ballcolor ball_1"> </div></div>
|
||||
<div class="contener_mixte"><div class="ballcolor ball_2"> </div></div>
|
||||
<div class="contener_mixte"><div class="ballcolor ball_3"> </div></div>
|
||||
<div class="contener_mixte"><div class="ballcolor ball_4"> </div></div>
|
||||
</div>
|
||||
<span class="text-gray size-12" translate>Creating profile...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="large-4 large-centered medium-6 medium-centered columns" ng-show="!loading">
|
||||
|
|
|
@ -1,9 +1,17 @@
|
|||
<div class="home" ng-controller="HomeController">
|
||||
|
||||
<div data-alert class="loading-screen" ng-show="$root.starting">
|
||||
<i class="size-60 fi-bitcoin-circle icon-rotate spinner"></i>
|
||||
<span translate>Accessing your profile...</span>
|
||||
<div class="loading-screen" ng-show="$root.starting">
|
||||
<div class="spinner">
|
||||
<div class="contener_general">
|
||||
<div class="contener_mixte"><div class="ballcolor ball_1"> </div></div>
|
||||
<div class="contener_mixte"><div class="ballcolor ball_2"> </div></div>
|
||||
<div class="contener_mixte"><div class="ballcolor ball_3"> </div></div>
|
||||
<div class="contener_mixte"><div class="ballcolor ball_4"> </div></div>
|
||||
</div>
|
||||
<span class="text-gray size-12" translate>Accessing your profile...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="large-4 large-centered medium-6 medium-centered columns" ng-show="!$root.starting">
|
||||
<div class="logo-setup">
|
||||
<img src="img/logo-negative-beta.svg" alt="Copay" width="146" height="59">
|
||||
|
|
|
@ -1,6 +1,14 @@
|
|||
<div class="import" ng-controller="ImportController">
|
||||
<div data-alert class="loading-screen" ng-show="loading">
|
||||
<i class="size-60 fi-bitcoin-circle icon-rotate spinner"></i> {{ importStatus|translate }}
|
||||
<div class="loading-screen" ng-show="loading">
|
||||
<div class="spinner">
|
||||
<div class="contener_general">
|
||||
<div class="contener_mixte"><div class="ballcolor ball_1"> </div></div>
|
||||
<div class="contener_mixte"><div class="ballcolor ball_2"> </div></div>
|
||||
<div class="contener_mixte"><div class="ballcolor ball_3"> </div></div>
|
||||
<div class="contener_mixte"><div class="ballcolor ball_4"> </div></div>
|
||||
</div>
|
||||
<span class="text-gray size-12" translate> {{ importStatus|translate }} </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-show="!loading">
|
||||
|
|
|
@ -1,8 +1,15 @@
|
|||
|
||||
<div class="home" ng-controller="ImportProfileController">
|
||||
|
||||
<div data-alert class="loading-screen" ng-show="loading">
|
||||
<i class="size-60 fi-bitcoin-circle icon-rotate spinner"></i> {{ importStatus|translate }}
|
||||
<div class="loading-screen" ng-show="loading">
|
||||
<div class="spinner">
|
||||
<div class="contener_general">
|
||||
<div class="contener_mixte"><div class="ballcolor ball_1"> </div></div>
|
||||
<div class="contener_mixte"><div class="ballcolor ball_2"> </div></div>
|
||||
<div class="contener_mixte"><div class="ballcolor ball_3"> </div></div>
|
||||
<div class="contener_mixte"><div class="ballcolor ball_4"> </div></div>
|
||||
</div>
|
||||
<span class="text-gray size-12">{{ importStatus|translate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-show="!loading">
|
||||
|
|
|
@ -1,8 +1,15 @@
|
|||
<div class="join" ng-controller="JoinController">
|
||||
<div data-alert class="loading-screen" ng-show="loading">
|
||||
<i class="size-60 fi-bitcoin-circle icon-rotate spinner"></i>
|
||||
<span translate>Connecting to Insight Wallet Server...</span>
|
||||
</div>
|
||||
<div class="loading-screen" ng-show="loading">
|
||||
<div class="spinner">
|
||||
<div class="contener_general">
|
||||
<div class="contener_mixte"><div class="ballcolor ball_1"> </div></div>
|
||||
<div class="contener_mixte"><div class="ballcolor ball_2"> </div></div>
|
||||
<div class="contener_mixte"><div class="ballcolor ball_3"> </div></div>
|
||||
<div class="contener_mixte"><div class="ballcolor ball_4"> </div></div>
|
||||
</div>
|
||||
<span class="text-gray size-12" translate>Connecting to Insight Wallet Server...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-show="!loading">
|
||||
<h1 class="hide-for-large-up">{{$root.title}}</h1>
|
||||
|
|
|
@ -1,7 +1,16 @@
|
|||
<div data-ng-init="" data-ng-controller="UriPaymentController">
|
||||
|
||||
<div data-alert class="loading-screen">
|
||||
<i class="size-60 fi-bitcoin-circle icon-rotate spinner"></i>
|
||||
<span translate>Preparing payment...</span>
|
||||
<div class="loading-screen" data-alert>
|
||||
<div class="spinner">
|
||||
<div class="contener_general">
|
||||
<div class="contener_mixte"><div class="ballcolor ball_1"> </div></div>
|
||||
<div class="contener_mixte"><div class="ballcolor ball_2"> </div></div>
|
||||
<div class="contener_mixte"><div class="ballcolor ball_3"> </div></div>
|
||||
<div class="contener_mixte"><div class="ballcolor ball_4"> </div></div>
|
||||
</div>
|
||||
<span class="text-gray size-12" translate>Preparing payment...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
Loading…
Reference in New Issue