mirror of
https://github.com/gusaul/grpcox.git
synced 2024-12-25 18:10:11 +00:00
improve loading UI
This commit is contained in:
gusaul
parent
79fe3402bb
commit
02a4feb17b
|
|
@ -16,18 +16,6 @@ body {
|
|||
.custom-control-label:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
top:0;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,.5);
|
||||
z-index: 99;
|
||||
}
|
||||
.loading-overlay div {
|
||||
margin:auto;
|
||||
}
|
||||
#choose-service, #choose-function, #body-request {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
|
@ -64,3 +52,57 @@ body {
|
|||
animation:octocat-wave 560ms ease-in-out
|
||||
}
|
||||
}
|
||||
|
||||
/* loading spinner */
|
||||
.spinner {
|
||||
margin: 10px auto;
|
||||
width: 180px;
|
||||
height: 80px;
|
||||
text-align: center;
|
||||
font-size: 80px;
|
||||
}
|
||||
|
||||
.spinner > div {
|
||||
background-color: #59698d;
|
||||
height: 100%;
|
||||
width: 18px;
|
||||
display: inline-block;
|
||||
|
||||
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
|
||||
animation: sk-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 sk-stretchdelay {
|
||||
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
|
||||
20% { -webkit-transform: scaleY(1.0) }
|
||||
}
|
||||
|
||||
@keyframes sk-stretchdelay {
|
||||
0%, 40%, 100% {
|
||||
transform: scaleY(0.4);
|
||||
-webkit-transform: scaleY(0.4);
|
||||
} 20% {
|
||||
transform: scaleY(1.0);
|
||||
-webkit-transform: scaleY(1.0);
|
||||
}
|
||||
}
|
||||
|
|
@ -92,25 +92,12 @@
|
|||
</svg>
|
||||
</a>
|
||||
|
||||
<div class="loading-overlay" style="display: none">
|
||||
<div><svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"
|
||||
class="lds-flat-ball" style="background: none;">
|
||||
<defs>
|
||||
<mask ng-attr-id="{{config.mid}}" id="lds-flat-ball-mask-e49120e4825">
|
||||
<circle cx="50" cy="50" r="45" fill="#fff"></circle>
|
||||
</mask>
|
||||
</defs>
|
||||
<circle cx="50" cy="50" r="45" ng-attr-fill="{{config.base}}" fill="#85a2b6"></circle>
|
||||
<path ng-attr-fill="{{config.dark}}" mask="url(#lds-flat-ball-mask-e49120e4825)" fill="rgb(107, 131, 147)" d="M 37.2721 55.3778 L 62.7279 29.922 L 162.728 129.922 L 137.272 155.378 Z">
|
||||
<animate attributeName="d" calcMode="spline" values="M 37.27207793864214 40.72792206135786 L 62.72792206135786 15.272077938642143 L 162.72792206135784 115.27207793864214 L 137.27207793864216 140.72792206135784 Z;M 37.27207793864214 84.72792206135786 L 62.72792206135786 59.27207793864214 L 162.72792206135784 159.27207793864216 L 137.27207793864216 184.72792206135784 Z;M 37.27207793864214 40.72792206135786 L 62.72792206135786 15.272077938642143 L 162.72792206135784 115.27207793864214 L 137.27207793864216 140.72792206135784 Z"
|
||||
keyTimes="0;0.5;1" dur="1" keySplines="0.45 0 0.9 0.55;0 0.45 0.55 0.9" begin="0s" repeatCount="indefinite"></animate>
|
||||
</path>
|
||||
<circle cx="50" ng-attr-cy="{{config.cy}}" ng-attr-r="{{config.radius}}" ng-attr-fill="{{config.color}}" cy="42.6499"
|
||||
r="18" fill="#fdfdfd">
|
||||
<animate attributeName="cy" calcMode="spline" values="28;72;28" keyTimes="0;0.5;1" dur="1" keySplines="0.45 0 0.9 0.55;0 0.45 0.55 0.9"
|
||||
begin="0s" repeatCount="indefinite"></animate>
|
||||
</circle>
|
||||
</svg></div>
|
||||
<div class="spinner" style="display: none">
|
||||
<div class="rect1"></div>
|
||||
<div class="rect2"></div>
|
||||
<div class="rect3"></div>
|
||||
<div class="rect4"></div>
|
||||
<div class="rect5"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -32,11 +32,14 @@ $('#get-services').click(function(){
|
|||
alert(errorThrown);
|
||||
},
|
||||
beforeSend: function(xhr){
|
||||
$('#choose-service').hide();
|
||||
xhr.setRequestHeader('use_tls', use_tls);
|
||||
$(this).html("Loading...");
|
||||
show_loading();
|
||||
},
|
||||
complete: function(){
|
||||
$(this).html(button);
|
||||
hide_loading();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -64,6 +67,7 @@ $('#select-service').change(function(){
|
|||
},
|
||||
error: err,
|
||||
beforeSend: function(xhr){
|
||||
$('#choose-function').hide();
|
||||
xhr.setRequestHeader('use_tls', use_tls);
|
||||
show_loading();
|
||||
},
|
||||
|
|
@ -96,6 +100,7 @@ $('#select-function').change(function(){
|
|||
},
|
||||
error: err,
|
||||
beforeSend: function(xhr){
|
||||
$('#body-request').hide();
|
||||
xhr.setRequestHeader('use_tls', use_tls);
|
||||
show_loading();
|
||||
},
|
||||
|
|
@ -129,11 +134,14 @@ $('#invoke-func').click(function(){
|
|||
},
|
||||
error: err,
|
||||
beforeSend: function(xhr){
|
||||
$('#response').hide();
|
||||
xhr.setRequestHeader('use_tls', use_tls);
|
||||
$(this).html("Loading...");
|
||||
show_loading();
|
||||
},
|
||||
complete: function(){
|
||||
$(this).html(button);
|
||||
hide_loading();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -173,9 +181,9 @@ function err(_, _, errorThrown) {
|
|||
}
|
||||
|
||||
function show_loading() {
|
||||
$('.loading-overlay').show();
|
||||
$('.spinner').show();
|
||||
}
|
||||
|
||||
function hide_loading() {
|
||||
$('.loading-overlay').hide();
|
||||
$('.spinner').hide();
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user