mirror of
https://github.com/RoboSats/robosats.git
synced 2025-01-05 14:00:09 +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%;
|
height: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
font-family: 'Roboto';
|
||||||
}
|
}
|
||||||
|
|
||||||
#main {
|
#main {
|
||||||
@ -18,27 +19,6 @@ body {
|
|||||||
height: 100%;
|
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 {
|
@keyframes spin {
|
||||||
0% { transform: rotate(0deg); }
|
0% { transform: rotate(0deg); }
|
||||||
100% { transform: rotate(360deg); }
|
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>
|
<title>RoboSats - Simple and Private Bitcoin Exchange</title>
|
||||||
{% load static %}
|
{% load static %}
|
||||||
<link rel="stylesheet" href="{% static "css/fonts.css" %}"/>
|
<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" %}"/>
|
<link rel="stylesheet" type="text/css" href="{% static "css/index.css" %}"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -27,7 +28,28 @@
|
|||||||
<div class="loaderCenter">
|
<div class="loaderCenter">
|
||||||
<div class="loaderSpinner"></div>
|
<div class="loaderSpinner"></div>
|
||||||
<br/>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user