BTCPrivate
/
copay
mirror of https://github.com/BTCPrivate/copay.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix loading screen & spinner

This commit is contained in:
bechi 2014-11-19 15:45:08 -03:00
parent b7401985cf
commit 55b31e64cd
10 changed files with 207 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
css/src/main.css
View File

@ -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;
}

65
css/src/style.css
View File

@ -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
View File

@ -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">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_2">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_3">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_4">&nbsp;</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">

11
views/create.html
View File

@ -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">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_2">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_3">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_4">&nbsp;</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>

12
views/createProfile.html
View File

@ -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">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_2">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_3">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_4">&nbsp;</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">

14
views/home.html
View File

@ -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">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_2">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_3">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_4">&nbsp;</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">

12
views/import.html
View File

@ -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">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_2">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_3">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_4">&nbsp;</div></div>
</div>
<span class="text-gray size-12" translate> {{ importStatus|translate }} </span>
</div>
</div>
<div ng-show="!loading">

13
views/importProfile.html
View File

@ -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">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_2">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_3">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_4">&nbsp;</div></div>
</div>
<span class="text-gray size-12">{{ importStatus|translate }}</span>
</div>
</div>
<div ng-show="!loading">

15
views/join.html
View File

@ -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">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_2">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_3">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_4">&nbsp;</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>

15
views/uri-payment.html
View File

@ -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">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_2">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_3">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_4">&nbsp;</div></div>
</div>
<span class="text-gray size-12" translate>Preparing payment...</span>
</div>
</div>
</div>