mirror of
https://github.com/RoboSats/robosats.git
synced 2024-12-14 03:16:24 +00:00
Add app loading message slider
This commit is contained in:
Reckless_Satoshi
parent
d5e5879340
commit
261cb46f9b
@ -3,6 +3,7 @@ body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Roboto';
|
||||
}
|
||||
|
||||
#main {
|
||||
@ -18,27 +19,6 @@ body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.loaderCenter{
|
||||
margin:0 auto;
|
||||
position: absolute;
|
||||
left:50%;
|
||||
top:50%;
|
||||
margin-left:-76px;
|
||||
margin-top:-60px;
|
||||
width:170px;
|
||||
height:120px;
|
||||
}
|
||||
.loaderSpinner {
|
||||
position: relative;
|
||||
border: 16px solid #f3f3f3;
|
||||
border-top: 16px solid #1976d2;
|
||||
border-bottom: 16px solid #9c27b0;
|
||||
border-radius: 50%;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
animation: spin 4s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
|
||||
272
frontend/static/css/loader.css
Normal file
272
frontend/static/css/loader.css
Normal file
@ -0,0 +1,272 @@
|
||||
|
||||
.loaderCenter{
|
||||
margin:0 auto;
|
||||
position: absolute;
|
||||
left:50%;
|
||||
top:50%;
|
||||
margin-top:-120px;
|
||||
margin-left:-190px;
|
||||
width:350px;
|
||||
height:120px;
|
||||
}
|
||||
.loaderSpinner {
|
||||
position: relative;
|
||||
left: 115px;
|
||||
border: 16px solid #f3f3f3;
|
||||
border-top: 16px solid #1976d2;
|
||||
border-bottom: 16px solid #9c27b0;
|
||||
border-radius: 50%;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
animation: spin 4s linear infinite;
|
||||
}
|
||||
|
||||
.content-slider {
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
.slider {
|
||||
height: 320px;
|
||||
width: 350px;
|
||||
margin: 40px auto 0;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mask {
|
||||
overflow: hidden;
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.slider ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slider li {
|
||||
width: 350px;
|
||||
height: 320px;
|
||||
position: absolute;
|
||||
top: -325px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.slider .quote {
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.slider li.anim1 {
|
||||
animation: cycle 15s linear infinite;
|
||||
}
|
||||
|
||||
.slider li.anim2 {
|
||||
animation: cycle2 15s linear infinite;
|
||||
}
|
||||
|
||||
.slider li.anim3 {
|
||||
animation: cycle3 15s linear infinite;
|
||||
}
|
||||
|
||||
.slider li.anim4 {
|
||||
animation: cycle4 15s linear infinite;
|
||||
}
|
||||
|
||||
.slider li.anim5 {
|
||||
animation: cycle5 15s linear infinite;
|
||||
}
|
||||
|
||||
.slider:hover li {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
@keyframes cycle {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
4% {
|
||||
top: 0px;
|
||||
}
|
||||
16% {
|
||||
top: 0px;
|
||||
opacity: 1;
|
||||
z-index: 0;
|
||||
}
|
||||
20% {
|
||||
top: 325px;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
21% {
|
||||
top: -325px;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
50% {
|
||||
top: -325px;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
92% {
|
||||
top: -325px;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
96% {
|
||||
top: -325px;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cycle2 {
|
||||
0% {
|
||||
top: -325px;
|
||||
opacity: 0;
|
||||
}
|
||||
16% {
|
||||
top: -325px;
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
top: 0px;
|
||||
opacity: 1;
|
||||
}
|
||||
24% {
|
||||
top: 0px;
|
||||
opacity: 1;
|
||||
}
|
||||
36% {
|
||||
top: 0px;
|
||||
opacity: 1;
|
||||
z-index: 0;
|
||||
}
|
||||
40% {
|
||||
top: 325px;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
41% {
|
||||
top: -325px;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
100% {
|
||||
top: -325px;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cycle3 {
|
||||
0% {
|
||||
top: -325px;
|
||||
opacity: 0;
|
||||
}
|
||||
36% {
|
||||
top: -325px;
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
top: 0px;
|
||||
opacity: 1;
|
||||
}
|
||||
44% {
|
||||
top: 0px;
|
||||
opacity: 1;
|
||||
}
|
||||
56% {
|
||||
top: 0px;
|
||||
opacity: 1;
|
||||
z-index: 0;
|
||||
}
|
||||
60% {
|
||||
top: 325px;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
61% {
|
||||
top: -325px;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
100% {
|
||||
top: -325px;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cycle4 {
|
||||
0% {
|
||||
top: -325px;
|
||||
opacity: 0;
|
||||
}
|
||||
56% {
|
||||
top: -325px;
|
||||
opacity: 0;
|
||||
}
|
||||
60% {
|
||||
top: 0px;
|
||||
opacity: 1;
|
||||
}
|
||||
64% {
|
||||
top: 0px;
|
||||
opacity: 1;
|
||||
}
|
||||
76% {
|
||||
top: 0px;
|
||||
opacity: 1;
|
||||
z-index: 0;
|
||||
}
|
||||
80% {
|
||||
top: 325px;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
81% {
|
||||
top: -325px;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
100% {
|
||||
top: -325px;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cycle5 {
|
||||
0% {
|
||||
top: -325px;
|
||||
opacity: 0;
|
||||
}
|
||||
76% {
|
||||
top: -325px;
|
||||
opacity: 0;
|
||||
}
|
||||
80% {
|
||||
top: 0px;
|
||||
opacity: 1;
|
||||
}
|
||||
84% {
|
||||
top: 0px;
|
||||
opacity: 1;
|
||||
}
|
||||
96% {
|
||||
top: 0px;
|
||||
opacity: 1;
|
||||
z-index: 0;
|
||||
}
|
||||
100% {
|
||||
top: 325px;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
@ -12,6 +12,7 @@
|
||||
<title>RoboSats - Simple and Private Bitcoin Exchange</title>
|
||||
{% load static %}
|
||||
<link rel="stylesheet" href="{% static "css/fonts.css" %}"/>
|
||||
<link rel="stylesheet" type="text/css" href="{% static "css/loader.css" %}"/>
|
||||
<link rel="stylesheet" type="text/css" href="{% static "css/index.css" %}"/>
|
||||
</head>
|
||||
<body>
|
||||
@ -27,7 +28,28 @@
|
||||
<div class="loaderCenter">
|
||||
<div class="loaderSpinner"></div>
|
||||
<br/>
|
||||
<div>Fetching robot parts ...</div>
|
||||
<div class="content-slider">
|
||||
<div class="slider">
|
||||
<div class="mask">
|
||||
<ul>
|
||||
<li class="anim1">
|
||||
<div class="quote">Fetching robot parts ...</div>
|
||||
</li>
|
||||
<li class="anim2">
|
||||
<div class="quote">Zipping Sats at light speed ...</div>
|
||||
</li>
|
||||
<li class="anim3">
|
||||
<div class="quote">Adding layers to the onion ...</div>
|
||||
</li>
|
||||
<li class="anim4">
|
||||
<div class="quote">Winning at game theory ...</div>
|
||||
</li>
|
||||
<li class="anim5">
|
||||
<div class="quote">Hiding you on 2^256 bits of entropy...</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user