diff --git a/dist/css/style.css b/dist/css/style.css
index 1175721a8..0929c949e 100644
--- a/dist/css/style.css
+++ b/dist/css/style.css
@@ -3,6 +3,15 @@ body {
 	overflow: hidden;
 }
 
+#progressBar {
+	width: 500px;
+	height: 24px;
+	position: absolute;
+	left: 50%;
+	top: 10px;
+	margin-left: -250px;
+}
+
 div#menu {
 	padding: 20px;
 	border-bottom:solid 1px #ccc;
diff --git a/dist/index.html b/dist/index.html
index f08323c67..d2702d4da 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -10,6 +10,7 @@
 		<script src="main.js"></script>
 	</head>
 	<body>
+		<progress value="0" max="100" id="progressBar"></progress>
 		<div id="menu">
 			<span class="menu-top">
 				<button id='btn-ai'><a href="/"><span class="icon-ai"></span></a></button>
diff --git a/src/index.ts b/src/index.ts
index 2d6c56425..2c2ef3737 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -13,127 +13,112 @@ import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
 
 window.addEventListener("DOMContentLoaded", () => {
 
-		let motion_enable = false;
+	// vrma
+	let motion_enable = false;
 
-  const canvas = document.getElementById("canvas");
-  if (canvas == null) return;
+	// progress
+	// https://sbcode.net/threejs/progress-indicator
+	const progressBar = document.getElementById('progressBar') as HTMLProgressElement
 
-  const scene = new THREE.Scene();
-		const camera = new THREE.PerspectiveCamera( 70, canvas.clientWidth/canvas.clientHeight, 0.1, 2000);
-  camera.position.set(0, 1, -1.5)
-  camera.rotation.set(0.0, Math.PI, 0.0)
-		camera.lookAt(new THREE.Vector3(0, 0, 0));
+	// three
+	const canvas = document.getElementById("canvas");
+	if (canvas == null) return;
+	const scene = new THREE.Scene();
+	const camera = new THREE.PerspectiveCamera( 70, canvas.clientWidth/canvas.clientHeight, 0.1, 2000);
+	camera.position.set(0, 1, -1.5)
+	camera.rotation.set(0.0, Math.PI, 0.0)
+	camera.lookAt(new THREE.Vector3(0, 0, 0));
 
-		// https://threejs.org/docs/#api/en/constants/Renderer
-		const renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
-  renderer.setPixelRatio(window.devicePixelRatio);
-  renderer.setSize(canvas.clientWidth, canvas.clientHeight);
-  renderer.setClearColor(0x7fbfff, 1.0);
-		renderer.shadowMap.enabled = true;
-		renderer.outputColorSpace = THREE.SRGBColorSpace;
-		renderer.toneMapping = THREE.ReinhardToneMapping;
-		renderer.toneMapping = THREE.NeutralToneMapping;
-		canvas.appendChild(renderer.domElement);
-		renderer.toneMappingExposure = 1.5;
-		
-		//renderer.toneMapping = THREE.ACESFilmicToneMapping;
-		
-		const light = new THREE.DirectionalLight(0xffffff, Math.PI);
-  light.position.set(1.0, 1.0, 1.0);
-  scene.add(light);
+	// https://threejs.org/docs/#api/en/constants/Renderer
+	const renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
+	renderer.setPixelRatio(window.devicePixelRatio);
+	renderer.setSize(canvas.clientWidth, canvas.clientHeight);
+	renderer.setClearColor(0x7fbfff, 1.0);
+	renderer.shadowMap.enabled = true;
+	renderer.outputColorSpace = THREE.SRGBColorSpace;
+	renderer.toneMapping = THREE.ReinhardToneMapping;
+	renderer.toneMapping = THREE.NeutralToneMapping;
+	canvas.appendChild(renderer.domElement);
+	renderer.toneMappingExposure = 1.5;
 
-  let currentVrm: any = undefined;
-  let currentVrmAnimation: any = undefined;
-  let currentMixer:any = undefined;
+	//renderer.toneMapping = THREE.ACESFilmicToneMapping;
 
-  function load(url: string) {
-    loader.load(
-        url,
-        (gltf) => {
-            tryInitVRM(gltf);
-            tryInitVRMA(gltf);
-        },
-        (progress) => console.log( 
-          "Loading model...", 
-          100.0 * (progress.loaded / progress.total), "%" 
-        ),
-        (error) => console.error(error)
-    );
-  }
+	const light = new THREE.DirectionalLight(0xffffff, Math.PI);
+	light.position.set(1.0, 1.0, 1.0);
+	scene.add(light);
 
-  function tryInitVRM(gltf: any) {
-    const vrm = gltf.userData.vrm;
-				if ( vrm == null ) {
-        return;
-    }
-    currentVrm = vrm;
-    scene.add(vrm.scene);
-    initAnimationClip();
+	let currentVrm: any = undefined;
+	let currentVrmAnimation: any = undefined;
+	let currentMixer:any = undefined;
+
+	function load(url: string) {
+		loader.load(
+			url,
+			(gltf) => {
+				progressBar.style.display = 'none'
+				tryInitVRM(gltf);
+				tryInitVRMA(gltf);
+			},
+			(xhr) => {
+				const percentComplete = (xhr.loaded / xhr.total) * 100
+				progressBar.value = percentComplete === Infinity ? 100 : percentComplete
+			},
+			(progress) => console.log( 
+																													"Loading model...", 
+																													100.0 * (progress.loaded / progress.total), "%" 
+																												),
+																												(error) => console.error(error)
+		);
+	}
+
+	function tryInitVRM(gltf: any) {
+		const vrm = gltf.userData.vrm;
+		if ( vrm == null ) {
+			return;
 		}
+		currentVrm = vrm;
+		scene.add(vrm.scene);
+		initAnimationClip();
+	}
 
-  function tryInitVRMA(gltf: any) {
-    const vrmAnimations = gltf.userData.vrmAnimations;
-    if (vrmAnimations == null) {
-        return;
-    }
-    currentVrmAnimation = vrmAnimations[0] ?? null;
-    initAnimationClip();
-  }
-
-  function initAnimationClip() {
-    if (currentVrm && currentVrmAnimation) {
-        currentMixer = new THREE.AnimationMixer(currentVrm.scene);
-        const clip = createVRMAnimationClip(currentVrmAnimation, currentVrm);
-        currentMixer.clipAction(clip).play();
-    }
-  }
-  
-  const loader = new GLTFLoader();
-  loader.register((parser) => {
-    return new VRMLoaderPlugin(parser);
-  });
-  loader.register((parser) => {
-    return new VRMAnimationLoaderPlugin(parser);
-  });
-
-		load("/vrma/ai.vrm");
-		load("/vrma/fly_c.vrma");	
-
-		const clock = new THREE.Clock();
-		clock.start();
-
-		const controls = new OrbitControls(camera, renderer.domElement);
-		controls.enableDamping = true;
-		controls.dampingFactor = 0.2;
-		controls.enableRotate = true;
-		controls.target.set( 0.0, 1.0, 0.0 );
-
-		function floor_default(){
-			scene.background = new THREE.Color( 0xffffff );
-			const directionalLight = new THREE.DirectionalLight(0xffffff);
-			directionalLight.position.set(1, 1, 1);
-			scene.add(directionalLight);
-			const ambientLight = new THREE.AmbientLight(0x333333);
-			scene.add(ambientLight);
-
-			let floor = new Mesh(
-				new BoxGeometry(50, 100),
-				new MeshLambertMaterial({
-					color: 0xffffff,
-					depthWrite: true,
-				})
-			);
-			floor.position.y = -1.0;
-			floor.rotation.x = -Math.PI / 2;
-			scene.add(floor);
-
-			const grid = new GridHelper(50, 100, 0xffffff, 0xffffff);
-			scene.add(grid);
-			grid.position.set(Math.round(0), 0, Math.round(0));
-			scene.fog = new Fog(0xffffff, 3, 20);
-			scene.fog?.color.set(0xffffff);
+	function tryInitVRMA(gltf: any) {
+		const vrmAnimations = gltf.userData.vrmAnimations;
+		if (vrmAnimations == null) {
+			return;
 		}
+		currentVrmAnimation = vrmAnimations[0] ?? null;
+		initAnimationClip();
+	}
 
+	function initAnimationClip() {
+		if (currentVrm && currentVrmAnimation) {
+			currentMixer = new THREE.AnimationMixer(currentVrm.scene);
+			const clip = createVRMAnimationClip(currentVrmAnimation, currentVrm);
+			currentMixer.clipAction(clip).play();
+		}
+	}
+
+	const loader = new GLTFLoader();
+	loader.register((parser) => {
+		return new VRMLoaderPlugin(parser);
+	});
+	loader.register((parser) => {
+		return new VRMAnimationLoaderPlugin(parser);
+	});
+
+	load("/vrma/ai.vrm");
+	load("/vrma/fly_c.vrma");	
+
+	const clock = new THREE.Clock();
+	clock.start();
+
+	const controls = new OrbitControls(camera, renderer.domElement);
+	controls.enableDamping = true;
+	controls.dampingFactor = 0.2;
+	controls.enableRotate = true;
+	controls.target.set( 0.0, 1.0, 0.0 );
+
+	function floor_default(){
 		scene.background = new THREE.Color( 0xffffff );
 		const directionalLight = new THREE.DirectionalLight(0xffffff);
 		directionalLight.position.set(1, 1, 1);
@@ -141,197 +126,222 @@ window.addEventListener("DOMContentLoaded", () => {
 		const ambientLight = new THREE.AmbientLight(0x333333);
 		scene.add(ambientLight);
 
-		let grid = new GridHelper(500, 1000, 0xffffff, 0xffffff);
+		let floor = new Mesh(
+			new BoxGeometry(50, 100),
+			new MeshLambertMaterial({
+				color: 0xffffff,
+				depthWrite: true,
+			})
+		);
+		floor.position.y = -1.0;
+		floor.rotation.x = -Math.PI / 2;
+		scene.add(floor);
+
+		const grid = new GridHelper(50, 100, 0xffffff, 0xffffff);
 		scene.add(grid);
 		grid.position.set(Math.round(0), 0, Math.round(0));
 		scene.fog = new Fog(0xffffff, 3, 20);
 		scene.fog?.color.set(0xffffff);
+	}
 
-		onResize();
-		window.addEventListener('resize', onResize);
-		function onResize() {
-			const width = window.innerWidth;
-			const height = window.innerHeight;
-			renderer.setPixelRatio(window.devicePixelRatio);
-			renderer.setSize(width, height);
-			camera.aspect = width / height;
-			camera.updateProjectionMatrix();
+	scene.background = new THREE.Color( 0xffffff );
+	const directionalLight = new THREE.DirectionalLight(0xffffff);
+	directionalLight.position.set(1, 1, 1);
+	scene.add(directionalLight);
+	const ambientLight = new THREE.AmbientLight(0x333333);
+	scene.add(ambientLight);
+
+	let grid = new GridHelper(500, 1000, 0xffffff, 0xffffff);
+	scene.add(grid);
+	grid.position.set(Math.round(0), 0, Math.round(0));
+	scene.fog = new Fog(0xffffff, 3, 20);
+	scene.fog?.color.set(0xffffff);
+
+	onResize();
+	window.addEventListener('resize', onResize);
+	function onResize() {
+		const width = window.innerWidth;
+		const height = window.innerHeight;
+		renderer.setPixelRatio(window.devicePixelRatio);
+		renderer.setSize(width, height);
+		camera.aspect = width / height;
+		camera.updateProjectionMatrix();
+	}
+
+	function animate() {
+		controls.update();
+		const delta = clock.getDelta();
+		if (currentMixer) {
+			currentMixer.update(delta);
 		}
-
-		function animate() {
-			controls.update();
-			const delta = clock.getDelta();
-			if (currentMixer) {
-				currentMixer.update(delta);
-			}
-			if (currentVrm) {
-				currentVrm.update(delta);
-			}
-			requestAnimationFrame(animate);
-			scene.rotation.y += 0.005;
-			renderer.render(scene, camera);
+		if (currentVrm) {
+			currentVrm.update(delta);
 		}
-		animate();
+		requestAnimationFrame(animate);
+		scene.rotation.y += 0.005;
+		renderer.render(scene, camera);
+	}
+	animate();
 
-		function random_happy() {
-			// https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/expressions.ja.md
-			currentVrm.expressionManager.setValue('relaxed', 0.5);
-		}
+	function random_happy() {
+		// https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/expressions.ja.md
+		currentVrm.expressionManager.setValue('relaxed', 0.5);
+	}
 
-		function random_head() {
-			// https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/lookAt.ja.md
-			currentVrm.lookAt.target = camera;
-			currentVrm.VRMLookAtBoneApplier = camera;
-			currentVrm.VRMLookAtExpressionApplier = camera;
+	function random_head() {
+		// https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/lookAt.ja.md
+		currentVrm.lookAt.target = camera;
+		currentVrm.VRMLookAtBoneApplier = camera;
+		currentVrm.VRMLookAtExpressionApplier = camera;
 
-			// https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/humanoid.ja.md
-			const head = currentVrm.humanoid.getRawBoneNode("head");
-			head.target = camera;
-		}
-
-		function random_blink(){
-			setInterval(() => {
-				currentVrm.expressionManager.setValue('relaxed', 0);
-				currentVrm.expressionManager.setValue('blink', 0);
-				random_head();
-				const r = Math.floor(Math.random() * 3);
-				if (r == 1) {
-					setTimeout(() => { currentVrm.expressionManager.setValue('blink', 1); }, 5000);
-					setTimeout(() => {
-						currentVrm.expressionManager.setValue('blink', 0);
-					}, 5500);
-				};
-				setTimeout(() => {
-					currentVrm.expressionManager.setValue('relaxed', 0.5);
-					currentVrm.expressionManager.setValue('blink', 1);
-				}, 6000);
-			}, 6500);
-		}
-		random_blink();
-
-		const el_light = document.querySelector('#btn-moon') as HTMLInputElement | null;
-		if(el_light != null) {
-			el_light.addEventListener('click', function(){
-				light_s();
-			});
-		}
-
-		let light_enable = true;
-		function light_s(){
-			if (light_enable == true) {
-				light_enable = false;
-				renderer.toneMapping = THREE.ACESFilmicToneMapping;
-				light.intensity = -0.5;
-				scene.background = new THREE.Color(0x000000);
-				scene.fog = new Fog(0x000000, 3, 20);
-			} else {
-				light_enable = true;
-				renderer.toneMapping = THREE.NeutralToneMapping;
-				light.intensity = 1;
-				scene.background = new THREE.Color(0xffffff);
-				scene.fog = new Fog(0xffffff, 3, 20);
-			}
-		}
-
-		const el_hdr = document.querySelector('#btn-sandar') as HTMLInputElement | null;
-		if(el_hdr != null) {
-			el_hdr.addEventListener('click', function(){
-				hdr_s();
-			});
-		}
-
-		let hdr_r = 0;
-		function hdr_s() {
-			if (hdr_r >= 2) { hdr_r = 0; } else { hdr_r++; };
-			let hdr = "/img/" + hdr_r + ".hdr";
-			new RGBELoader().load(hdr, function (texture) {
-				texture.mapping = THREE.EquirectangularReflectionMapping;
-				scene.background = texture;
-				scene.environment = texture;
-			});
-		}
-
-		function cool_time() {
-			setTimeout(() => {
-				motion_enable = false;
-			}, 5000);
-		}
-
-		const el_sword = document.querySelector('#btn-sword') as HTMLInputElement | null;
-		if(el_sword != null) {
-			el_sword.addEventListener('click', function(){
-				sword_s();
-			});
-		}
-
-		function sword_s(){
-			scene.remove(currentVrm.scene);
-			load("/vrma/ai_sword.vrm");
-			load("/vrma/sword.vrma");	
-			setTimeout(() => {
-				load("/vrma/idle.vrma");	
-			}, 1000);
-			setTimeout(() => {
-				load("/vrma/ai.vrm");
-				scene.remove(currentVrm.scene);
-			}, 5000);
-		}
-
-		const el_cloud = document.querySelector('#btn-cloud') as HTMLInputElement | null;
-		if(el_cloud != null) {
-			el_cloud.addEventListener('click', function(){
-				cloud_s();
-			});
-		}
-
-		function cloud_s(){
-			load("/vrma/sky.vrma");	
-			setTimeout(() => {
-				load("/vrma/jump.vrma");	
-			}, 5000);
-			setTimeout(() => {
-				load("/vrma/idle.vrma");	
-			}, 5500);
-		}
-
-		let mouse_ivent_timer_id;
-		const el_run = document.querySelector('#btn-run') as HTMLInputElement | null;
-		if(el_run != null) {
-			el_run.addEventListener('mousedown', function(){
-				mouse_ivent_timer_id = setTimeout(function () {
-					motion_enable = true;
-				}, 1000);
-				load("/vrma/run.vrma");	
-			});
-		}
-		document.querySelector('#btn-run').addEventListener('mouseup', (event) => {
-			clearTimeout(mouse_ivent_timer_id);
-			load("/vrma/idle.vrma");	
-			cool_time();
-		});
-
-		const el_jump = document.querySelector('#btn-jump') as HTMLInputElement | null;
-		if(el_jump != null) {
-			el_jump.addEventListener('mousedown', function(){
-				jump_s();
-			});
-		}
-
-		function jump_s(){
-			motion_enable = true;
-			load("/vrma/jump.vrma");	
-			setTimeout(() => {
-				load("/vrma/idle.vrma");	
-			}, 500);
-			cool_time();
-		}
+		// https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/humanoid.ja.md
+		const head = currentVrm.humanoid.getRawBoneNode("head");
+		head.target = camera;
+	}
 
+	function random_blink(){
 		setInterval(() => {
-			const r = Math.floor(Math.random() * 4 + 1);
-			if (motion_enable == false) { load("/vrma/" + r + ".vrma"); }
+			currentVrm.expressionManager.setValue('relaxed', 0);
+			currentVrm.expressionManager.setValue('blink', 0);
+			random_head();
+			const r = Math.floor(Math.random() * 3);
+			if (r == 1) {
+				setTimeout(() => { currentVrm.expressionManager.setValue('blink', 1); }, 5000);
+				setTimeout(() => {
+					currentVrm.expressionManager.setValue('blink', 0);
+				}, 5500);
+			};
 			setTimeout(() => {
-				if (motion_enable == false) { load("/vrma/fly_c.vrma");	}
-			}, 10000);
-		}, 15000);
+				currentVrm.expressionManager.setValue('relaxed', 0.5);
+				currentVrm.expressionManager.setValue('blink', 1);
+			}, 6000);
+		}, 6500);
+	}
+	random_blink();
+
+	const el_light = document.querySelector('#btn-moon') as HTMLInputElement | null;
+	if(el_light != null) {
+		el_light.addEventListener('click', function(){
+			light_s();
+		});
+	}
+
+	let light_enable = true;
+	function light_s(){
+		if (light_enable == true) {
+			light_enable = false;
+			renderer.toneMapping = THREE.ACESFilmicToneMapping;
+			light.intensity = -0.5;
+			scene.background = new THREE.Color(0x000000);
+			scene.fog = new Fog(0x000000, 3, 20);
+		} else {
+			light_enable = true;
+			renderer.toneMapping = THREE.NeutralToneMapping;
+			light.intensity = 1;
+			scene.background = new THREE.Color(0xffffff);
+			scene.fog = new Fog(0xffffff, 3, 20);
+		}
+	}
+
+	const el_hdr = document.querySelector('#btn-sandar') as HTMLInputElement | null;
+	if(el_hdr != null) {
+		el_hdr.addEventListener('click', function(){
+			hdr_s();
+		});
+	}
+
+	let hdr_r = 0;
+	function hdr_s() {
+		if (hdr_r >= 2) { hdr_r = 0; } else { hdr_r++; };
+		let hdr = "/img/" + hdr_r + ".hdr";
+		new RGBELoader().load(hdr, function (texture) {
+			texture.mapping = THREE.EquirectangularReflectionMapping;
+			scene.background = texture;
+			scene.environment = texture;
+		});
+	}
+
+	function cool_time() {
+		setTimeout(() => {
+			motion_enable = false;
+		}, 5000);
+	}
+
+	const el_sword = document.querySelector('#btn-sword') as HTMLInputElement | null;
+	if(el_sword != null) {
+		el_sword.addEventListener('click', function(){
+			sword_s();
+		});
+	}
+
+	function sword_s(){
+		scene.remove(currentVrm.scene);
+		load("/vrma/ai_sword.vrm");
+		load("/vrma/sword.vrma");	
+		setTimeout(() => {
+			load("/vrma/idle.vrma");	
+		}, 1000);
+		setTimeout(() => {
+			load("/vrma/ai.vrm");
+			scene.remove(currentVrm.scene);
+		}, 5000);
+	}
+
+	const el_cloud = document.querySelector('#btn-cloud') as HTMLInputElement | null;
+	if(el_cloud != null) {
+		el_cloud.addEventListener('click', function(){
+			cloud_s();
+		});
+	}
+
+	function cloud_s(){
+		load("/vrma/sky.vrma");	
+		setTimeout(() => {
+			load("/vrma/jump.vrma");	
+		}, 5000);
+		setTimeout(() => {
+			load("/vrma/idle.vrma");	
+		}, 5500);
+	}
+
+	let mouse_ivent_timer_id;
+	const el_run = document.querySelector('#btn-run') as HTMLInputElement | null;
+	if(el_run != null) {
+		el_run.addEventListener('mousedown', function(){
+			mouse_ivent_timer_id = setTimeout(function () {
+				motion_enable = true;
+			}, 1000);
+			load("/vrma/run.vrma");	
+		});
+	}
+	document.querySelector('#btn-run').addEventListener('mouseup', (event) => {
+		clearTimeout(mouse_ivent_timer_id);
+		load("/vrma/idle.vrma");	
+		cool_time();
+	});
+
+	const el_jump = document.querySelector('#btn-jump') as HTMLInputElement | null;
+	if(el_jump != null) {
+		el_jump.addEventListener('mousedown', function(){
+			jump_s();
+		});
+	}
+
+	function jump_s(){
+		motion_enable = true;
+		load("/vrma/jump.vrma");	
+		setTimeout(() => {
+			load("/vrma/idle.vrma");	
+		}, 500);
+		cool_time();
+	}
+
+	setInterval(() => {
+		const r = Math.floor(Math.random() * 4 + 1);
+		if (motion_enable == false) { load("/vrma/" + r + ".vrma"); }
+		setTimeout(() => {
+			if (motion_enable == false) { load("/vrma/fly_c.vrma");	}
+		}, 10000);
+	}, 15000);
 
 })
