# Problems with logging the current progress of a loading process

**URL:** <https://discourse.threejs.org/t/problems-with-logging-the-current-progress-of-a-loading-process/4611>\
**Category:** Questions\
**Tags:** loaders\
**Created:** [October 23, 2018, 9:25am UTC](https://discourse.threejs.org/t/problems-with-logging-the-current-progress-of-a-loading-process/4611 "2018-10-23T09:25:59Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![mithradantor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mithradantor/32/2979_2.png) [@mithradantor](https://discourse.threejs.org/u/mithradantor)\
**Post date:** [October 23, 2018, 9:25am UTC](https://discourse.threejs.org/t/problems-with-logging-the-current-progress-of-a-loading-process/4611/1 "2018-10-23T09:25:59Z")

</div>

Hi guys,

when I try to log my “percentage loaded” it always instantly returns 100% instead of counting from 0% up and till 100%. Can anyone tell me why?

```
	function createModel(loader, scene, model = 'model/helmet/damagedHelmet.gltf')
{
	loader = new THREE.GLTFLoader();

	loader.load(model, function(gltf) {

		storedOriginalModel = gltf.scene;

		gltf.scene.traverse(function(child) {

			if (child.isMesh) {

				child.material.envMap = envMap;

			}

		});

		gltf.scene.name = 'model';

		scene.add( gltf.scene );

		gltf.animations; // Array<THREE.AnimationClip>
		gltf.scene; // THREE.Scene
		gltf.scenes; // Array<THREE.Scene>
		gltf.cameras; // Array<THREE.Camera>
		gltf.asset; // Object

	}, function(xhr) {

		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

	}, function(e) {

		console.error(e);

	});
}
```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 23, 2018, 1:48pm UTC](https://discourse.threejs.org/t/problems-with-logging-the-current-progress-of-a-loading-process/4611/2 "2018-10-23T13:48:34Z")

</div>

A more robust solution for logging the progress of a XHR request is:

```auto
if ( xhr.lengthComputable ) {

    console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );

}

```

If a web or content server does not set a `Content-Length` header in the response, `xhr.lengthComputable` is `false` since it’s impossible to compute the current amount of loaded data.

---

<div class="post-metadata">

**Author:** ![mithradantor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mithradantor/32/2979_2.png) [@mithradantor](https://discourse.threejs.org/u/mithradantor)\
**Post date:** [October 23, 2018, 2:29pm UTC](https://discourse.threejs.org/t/problems-with-logging-the-current-progress-of-a-loading-process/4611/3 "2018-10-23T14:29:19Z")

</div>

Ahhhh never knew, thank you so much!

Besides that, still the same outcome haha. It still shows 100% instantly instead of showing me multiple logs e.g. 10% 20% et cetera up to 100%.

I want this because I want to make a “loading” bar so that you can visually see the progress of loading the model.

My code is here: [https://www.mijnnaamisangelo.nl/new/](https://www.mijnnaamisangelo.nl/new/)

If you open your developer console you will see only one console log which says 100%.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 23, 2018, 2:58pm UTC](https://discourse.threejs.org/t/problems-with-logging-the-current-progress-of-a-loading-process/4611/4 "2018-10-23T14:58:52Z")

</div>

The thing is…the `glTF` file is so small that it is more or less instantly loaded. In order to keep track of all pending resources (like textures), use [THREE.LoadingManager](https://threejs.org/docs/#api/en/loaders/managers/LoadingManager).

---

<div class="post-metadata">

**Author:** ![mithradantor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mithradantor/32/2979_2.png) [@mithradantor](https://discourse.threejs.org/u/mithradantor)\
**Post date:** [October 23, 2018, 5:04pm UTC](https://discourse.threejs.org/t/problems-with-logging-the-current-progress-of-a-loading-process/4611/5 "2018-10-23T17:04:57Z")

</div>

Thanks for your reply!

Wish I was as smart as you haha you know everything ^^

Did that, didnt work quite well haha.

```
    manager.onProgress = function ( url, itemsLoaded, itemsTotal ) {

    console.log(itemsLoaded);
    console.log(itemsTotal);
};

```

First time it echo’s 1 / 3  
All the times after that it says 2/8, 3/8, 4/8 et cetera. 8 is right but the first log is always wrong.

Is that my bad?

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [October 23, 2018, 5:31pm UTC](https://discourse.threejs.org/t/problems-with-logging-the-current-progress-of-a-loading-process/4611/6 "2018-10-23T17:31:41Z")

</div>

Progress bars are hard. 🙂

I think the problem above is that you initiate loading 3 files, but those files themselves reference other files. For example, glTF can reference `.bin` or texture files. The LoadingManager doesn’t know about those extra resources until the first resources have come back.

You can do some “hacks” when displaying the progress bar to make this look smooth. Or, consider packing your glTF and its resources into a single GLB: [https://glb-packer.glitch.me/](https://glb-packer.glitch.me/). That may still show some extra requests (used internally to parse embedded texture objects) but should be closer to what you’d expect.

---

<div class="post-metadata">

**Author:** ![mithradantor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mithradantor/32/2979_2.png) [@mithradantor](https://discourse.threejs.org/u/mithradantor)\
**Post date:** [October 23, 2018, 5:59pm UTC](https://discourse.threejs.org/t/problems-with-logging-the-current-progress-of-a-loading-process/4611/7 "2018-10-23T17:59:23Z")

</div>

Ah no wonder hahaha… makes sense if they reference other files.  
Ill do a small “work around” then, just never knew they could reference to other files within the glTF file.

Thanks for letting me know 🙂