add initial loading bar (fix #4)
This commit is contained in:
parent
899c9a1bdd
commit
124ce4779f
3 changed files with 11749 additions and 13 deletions
11721
app/package-lock.json
generated
11721
app/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -8,6 +8,7 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"core-js": "^3.6.5",
|
"core-js": "^3.6.5",
|
||||||
|
"fetch-progress": "^1.3.0",
|
||||||
"normalize.css": "^8.0.1",
|
"normalize.css": "^8.0.1",
|
||||||
"panzoom": "^9.4.1",
|
"panzoom": "^9.4.1",
|
||||||
"stats.js": "^0.17.0",
|
"stats.js": "^0.17.0",
|
||||||
|
|
|
@ -1,5 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="svg-content">
|
<div class="svg-content">
|
||||||
|
<div :class="['loading', {loaded: loadedPercent == 100}]">
|
||||||
|
<div :style="{width: `${loadedPercent}%`}" class="loading-bar"></div>
|
||||||
|
</div>
|
||||||
<div class="content" ref="root">
|
<div class="content" ref="root">
|
||||||
<div class="video-scrolls">
|
<div class="video-scrolls">
|
||||||
<VideoScroll v-for="scroll in scrolls" :definition="scroll"/>
|
<VideoScroll v-for="scroll in scrolls" :definition="scroll"/>
|
||||||
|
@ -33,6 +36,7 @@ import VideoScroll, {VideoScrollDef, VideoScrollDirection} from "@/components/Vi
|
||||||
import AudioArea, {AudioAreaDef} from "@/components/AudioArea.vue";
|
import AudioArea, {AudioAreaDef} from "@/components/AudioArea.vue";
|
||||||
import Stats from "stats.js";
|
import Stats from "stats.js";
|
||||||
import {rotate} from "@/utils";
|
import {rotate} from "@/utils";
|
||||||
|
import fetchProgress from "fetch-progress";
|
||||||
|
|
||||||
|
|
||||||
export interface BoundingBox {
|
export interface BoundingBox {
|
||||||
|
@ -67,6 +71,7 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
setup(props, {emit}) {
|
setup(props, {emit}) {
|
||||||
const root = ref<HTMLDivElement | null>(null);
|
const root = ref<HTMLDivElement | null>(null);
|
||||||
|
const loadedPercent = ref(0);
|
||||||
const panzoom = ref<null | PanZoom>(null);
|
const panzoom = ref<null | PanZoom>(null);
|
||||||
const anchors = ref<SVGRectElement[]>([]);
|
const anchors = ref<SVGRectElement[]>([]);
|
||||||
const scrolls = ref<VideoScrollDef[]>([]);
|
const scrolls = ref<VideoScrollDef[]>([]);
|
||||||
|
@ -91,10 +96,16 @@ export default defineComponent({
|
||||||
|
|
||||||
// Fetch & load SVG
|
// Fetch & load SVG
|
||||||
console.info(`[SVG] Fetching "${props.url}..."`);
|
console.info(`[SVG] Fetching "${props.url}..."`);
|
||||||
const fetchResult = await fetch(props.url);
|
const fetchResult = await fetch(props.url).then(
|
||||||
console.debug("[SVG] Fetched, parsing...");
|
fetchProgress({
|
||||||
|
onProgress(progress) {
|
||||||
|
loadedPercent.value = (progress as any).percentage;
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
const svgParsed = new DOMParser().parseFromString(await fetchResult.text(), "image/svg+xml") as Document;
|
const svgParsed = new DOMParser().parseFromString(await fetchResult.text(), "image/svg+xml") as Document;
|
||||||
console.debug("[SVG] Parsed.");
|
console.debug("[SVG] Loaded.");
|
||||||
|
loadedPercent.value = 100;
|
||||||
const svg = element.appendChild(svgParsed.firstElementChild as Element) as any;
|
const svg = element.appendChild(svgParsed.firstElementChild as Element) as any;
|
||||||
|
|
||||||
// Set document background
|
// Set document background
|
||||||
|
@ -304,6 +315,7 @@ export default defineComponent({
|
||||||
|
|
||||||
return {
|
return {
|
||||||
root,
|
root,
|
||||||
|
loadedPercent,
|
||||||
panzoom,
|
panzoom,
|
||||||
anchors,
|
anchors,
|
||||||
panToAnchor,
|
panToAnchor,
|
||||||
|
@ -433,6 +445,28 @@ function processStart(svg: XMLDocument): SVGRectElement | null {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background: black;
|
||||||
|
transition: opacity 0.5s;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loaded {
|
||||||
|
opacity: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-bar {
|
||||||
|
height: 6px;
|
||||||
|
background: white;
|
||||||
|
margin: 25% auto;
|
||||||
|
transition: width 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
.devpanel {
|
.devpanel {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
Loading…
Reference in a new issue