- added loading anim
This commit is contained in:
Dev
parent
c9b107809d
commit
c0b0681fee
@ -3,6 +3,20 @@
|
||||
{% language.set "lean.api.request.debugger" %}
|
||||
|
||||
<div id="request-debugger" class="hide">
|
||||
<div class="request-compose">
|
||||
<div class="loading-anim">
|
||||
<div class="la-ball-spin-clockwise-fade-rotating">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="request-head">
|
||||
<div class="method" style="">
|
||||
{% ui.select "method", MethodEnum::generateArray(), post('method') %}
|
||||
@ -18,6 +32,7 @@
|
||||
<div class="request-content">
|
||||
<div id="request" style="min-height: 150px; width:100%; border:1px solid #ededed;">{}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="request-response hide">
|
||||
<hr>
|
||||
@ -44,7 +59,18 @@
|
||||
.response-head .response-code {background:#dfdfdf;padding:0 5px;font-weight: bold;line-height: 29px;font-size: 80%;}
|
||||
.response-head .response-message {padding:0 10px;background:#fbfbfb;line-height: 30px;font-size: 80%;}
|
||||
|
||||
.request-compose {position:relative;}
|
||||
.loading-anim {display:none;position:absolute;left:0;right:0;top:0;bottom:0;justify-content: center;align-items: center;z-index: 15;background: rgba(122, 121, 121, 0.25);}
|
||||
.la-ball-spin-clockwise-fade-rotating {color: #0f6ab4!important;}
|
||||
.loading .loading-anim {display: flex;}
|
||||
|
||||
#response {max-height: 66vh;}
|
||||
/*!
|
||||
* Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
|
||||
* Copyright 2015 Daniel Cardoso <@DanielCardoso>
|
||||
* Licensed under MIT
|
||||
*/
|
||||
.la-ball-spin-clockwise-fade-rotating,.la-ball-spin-clockwise-fade-rotating>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-ball-spin-clockwise-fade-rotating{display:block;font-size:0;color:#fff}.la-ball-spin-clockwise-fade-rotating.la-dark{color:#333}.la-ball-spin-clockwise-fade-rotating>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-ball-spin-clockwise-fade-rotating{width:32px;height:32px;-webkit-animation:ball-spin-clockwise-fade-rotating-rotate 6s infinite linear;-moz-animation:ball-spin-clockwise-fade-rotating-rotate 6s infinite linear;-o-animation:ball-spin-clockwise-fade-rotating-rotate 6s infinite linear;animation:ball-spin-clockwise-fade-rotating-rotate 6s infinite linear}.la-ball-spin-clockwise-fade-rotating>div{position:absolute;top:50%;left:50%;width:8px;height:8px;margin-top:-4px;margin-left:-4px;border-radius:100%;-webkit-animation:ball-spin-clockwise-fade-rotating 1s infinite linear;-moz-animation:ball-spin-clockwise-fade-rotating 1s infinite linear;-o-animation:ball-spin-clockwise-fade-rotating 1s infinite linear;animation:ball-spin-clockwise-fade-rotating 1s infinite linear}.la-ball-spin-clockwise-fade-rotating>div:nth-child(1){top:5%;left:50%;-webkit-animation-delay:-.875s;-moz-animation-delay:-.875s;-o-animation-delay:-.875s;animation-delay:-.875s}.la-ball-spin-clockwise-fade-rotating>div:nth-child(2){top:18.1801948466%;left:81.8198051534%;-webkit-animation-delay:-.75s;-moz-animation-delay:-.75s;-o-animation-delay:-.75s;animation-delay:-.75s}.la-ball-spin-clockwise-fade-rotating>div:nth-child(3){top:50%;left:95%;-webkit-animation-delay:-.625s;-moz-animation-delay:-.625s;-o-animation-delay:-.625s;animation-delay:-.625s}.la-ball-spin-clockwise-fade-rotating>div:nth-child(4){top:81.8198051534%;left:81.8198051534%;-webkit-animation-delay:-.5s;-moz-animation-delay:-.5s;-o-animation-delay:-.5s;animation-delay:-.5s}.la-ball-spin-clockwise-fade-rotating>div:nth-child(5){top:94.9999999966%;left:50.0000000005%;-webkit-animation-delay:-.375s;-moz-animation-delay:-.375s;-o-animation-delay:-.375s;animation-delay:-.375s}.la-ball-spin-clockwise-fade-rotating>div:nth-child(6){top:81.8198046966%;left:18.1801949248%;-webkit-animation-delay:-.25s;-moz-animation-delay:-.25s;-o-animation-delay:-.25s;animation-delay:-.25s}.la-ball-spin-clockwise-fade-rotating>div:nth-child(7){top:49.9999750815%;left:5.0000051215%;-webkit-animation-delay:-.125s;-moz-animation-delay:-.125s;-o-animation-delay:-.125s;animation-delay:-.125s}.la-ball-spin-clockwise-fade-rotating>div:nth-child(8){top:18.179464974%;left:18.1803700518%;-webkit-animation-delay:0s;-moz-animation-delay:0s;-o-animation-delay:0s;animation-delay:0s}.la-ball-spin-clockwise-fade-rotating.la-sm{width:16px;height:16px}.la-ball-spin-clockwise-fade-rotating.la-sm>div{width:4px;height:4px;margin-top:-2px;margin-left:-2px}.la-ball-spin-clockwise-fade-rotating.la-2x{width:64px;height:64px}.la-ball-spin-clockwise-fade-rotating.la-2x>div{width:16px;height:16px;margin-top:-8px;margin-left:-8px}.la-ball-spin-clockwise-fade-rotating.la-3x{width:96px;height:96px}.la-ball-spin-clockwise-fade-rotating.la-3x>div{width:24px;height:24px;margin-top:-12px;margin-left:-12px}@-webkit-keyframes ball-spin-clockwise-fade-rotating-rotate{100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}@-moz-keyframes ball-spin-clockwise-fade-rotating-rotate{100%{-moz-transform:rotate(-360deg);transform:rotate(-360deg)}}@-o-keyframes ball-spin-clockwise-fade-rotating-rotate{100%{-o-transform:rotate(-360deg);transform:rotate(-360deg)}}@keyframes ball-spin-clockwise-fade-rotating-rotate{100%{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-o-transform:rotate(-360deg);transform:rotate(-360deg)}}@-webkit-keyframes ball-spin-clockwise-fade-rotating{50%{opacity:.25;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-moz-keyframes ball-spin-clockwise-fade-rotating{50%{opacity:.25;-moz-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-moz-transform:scale(1);transform:scale(1)}}@-o-keyframes ball-spin-clockwise-fade-rotating{50%{opacity:.25;-o-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-o-transform:scale(1);transform:scale(1)}}@keyframes ball-spin-clockwise-fade-rotating{50%{opacity:.25;-webkit-transform:scale(.5);-moz-transform:scale(.5);-o-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}
|
||||
</style>
|
||||
|
||||
<script src="{% asset 'static/ace/src-noconflict/ace.js' %}" type="text/javascript" charset="utf-8"></script>
|
||||
@ -139,7 +165,7 @@
|
||||
}
|
||||
|
||||
formatResponse("ace/mode/" + aceMode);
|
||||
});
|
||||
}).finally(() => requestDebugger.classList.remove("loading"));
|
||||
|
||||
responseResponse.classList.toggle('hide', false);
|
||||
});
|
||||
@ -157,17 +183,22 @@
|
||||
});
|
||||
|
||||
async function launchRequest(method = "POST", url = "", body = "{}") {
|
||||
let headers = {
|
||||
"Content-Type": "application/json"
|
||||
};
|
||||
|
||||
if (token.value) {
|
||||
headers['Authorization'] = `Bearer ${token.value}`;
|
||||
}
|
||||
|
||||
method = method.toUpperCase();
|
||||
|
||||
let responseData = {
|
||||
method: method,
|
||||
mode: "cors",
|
||||
cache: "no-cache",
|
||||
credentials: "omit",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
'Authorization': `Bearer ${token.value}`
|
||||
},
|
||||
credentials: headers.Authorization ? "omit" : "same-origin",
|
||||
headers: headers,
|
||||
redirect: "follow",
|
||||
referrerPolicy: "no-referrer"
|
||||
};
|
||||
@ -176,6 +207,8 @@
|
||||
responseData.body = body;
|
||||
}
|
||||
|
||||
requestDebugger.classList.add("loading");
|
||||
|
||||
return await fetch(url, responseData);
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user