mirror of
https://github.com/Redocly/redoc.git
synced 2024-11-10 19:06:34 +03:00
add loading animation
This commit is contained in:
parent
91e7af2b9d
commit
deed1272fc
|
@ -14,9 +14,7 @@
|
|||
</form>
|
||||
</nav>
|
||||
|
||||
<redoc scroll-y-offset="body > nav" spec-url='swagger.json'>
|
||||
Loading...
|
||||
</redoc>
|
||||
<redoc scroll-y-offset="body > nav" spec-url='rebilly.json'></redoc>
|
||||
|
||||
<!-- ReDoc built file with all dependencies included -->
|
||||
<script src="dist/redoc.full.js"> </script>
|
||||
|
|
|
@ -80,6 +80,7 @@ nav {
|
|||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
|
|
|
@ -4,7 +4,8 @@
|
|||
var schemaUrlForm = document.getElementById('schema-url-form');
|
||||
var schemaUrlInput = document.getElementById('schema-url-input');
|
||||
schemaUrlForm.addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
Redoc.init(schemaUrlInput.value);
|
||||
event.preventDefault();
|
||||
return false;
|
||||
})
|
||||
})();
|
||||
|
|
|
@ -20,6 +20,8 @@ import {isFunction} from 'angular2/src/facade/lang';
|
|||
|
||||
let optionNames = new Set(['scrollYOffset']);
|
||||
|
||||
let dom = new BrowserDomAdapter();
|
||||
|
||||
@RedocComponent({
|
||||
selector: 'redoc',
|
||||
providers: [SchemaManager, BrowserDomAdapter, OptionsManager],
|
||||
|
@ -81,10 +83,58 @@ export default class Redoc extends BaseComponent {
|
|||
}
|
||||
}
|
||||
|
||||
static showLoadingAnimation() {
|
||||
if (!dom.query('#redoc-loading-style')) {
|
||||
let animStyle = dom.createStyleElement(`
|
||||
redoc.loading {
|
||||
position: relative;
|
||||
display: block;
|
||||
min-height:350px;
|
||||
}
|
||||
|
||||
redoc.loading:before {
|
||||
content: "Loading...";
|
||||
font-size: 28px;
|
||||
text-align: center;
|
||||
padding-top: 40px;
|
||||
color: #3F5C9C;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: white;
|
||||
z-index: 9999;
|
||||
opacity: 1;
|
||||
transition: all 0.6s ease-out;
|
||||
}
|
||||
|
||||
redoc.loading-remove:before {
|
||||
opacity: 0;
|
||||
}
|
||||
`);
|
||||
animStyle.id = 'redoc-loading-style';
|
||||
dom.appendChild(dom.defaultDoc().head, animStyle);
|
||||
}
|
||||
dom.addClass(dom.query('redoc'), 'loading');
|
||||
}
|
||||
|
||||
static hideLoadingAnimation() {
|
||||
let redocEl = dom.query('redoc');
|
||||
dom.addClass(redocEl, 'loading-remove');
|
||||
setTimeout(() => {
|
||||
dom.removeClass(redocEl, 'loading-remove');
|
||||
dom.removeClass(redocEl, 'loading');
|
||||
}, 400);
|
||||
}
|
||||
|
||||
static init(schemaUrl, options) {
|
||||
if (Redoc.appRef) {
|
||||
Redoc.dispose();
|
||||
}
|
||||
Redoc.showLoadingAnimation();
|
||||
return SchemaManager.instance().load(schemaUrl)
|
||||
.then(() => {
|
||||
(new OptionsManager()).options = options;
|
||||
|
@ -92,6 +142,7 @@ export default class Redoc extends BaseComponent {
|
|||
})
|
||||
.then(
|
||||
(appRef) => {
|
||||
Redoc.hideLoadingAnimation();
|
||||
Redoc.appRef = appRef;
|
||||
redocEvents.bootstrapped.next();
|
||||
console.log('ReDoc bootstrapped!');
|
||||
|
|
Loading…
Reference in New Issue
Block a user