An open source asynchronous assets loader written in Javascript.


The main purpose was to provide a simple way to load assets only when needed instead of loading everything when the main page loads.

  • Setup your json config file containing all your assets (images, textures, sprites, sounds, musics, texts, jsons),
  • launch the loader and use onProgress callback to set your own progress bar design,
  • wait for onComplete callback to start using your freshly loaded assets.

Check Example and Code section for more information on how to use Orbis.js. There is also a documentation if you need to go deeper.

You can help develop Orbis.js on Github.


Please note the loader must be launched on a web server in order to avoid "Cross origin requests" errors.
Follow this link to learn more.


HTML (index.html)

<button id="launcher" type="button" onclick="loadAssets()"> LOAD ASSETS </button>

<progress id="progressBar" value="0" max="100"></progress>
<input id='progressText' disabled> 

Json config (assets.json)


    "folder": "folder_name",
    "files" : [
      { "name":"file1.txt",
        "other_info":"other info"
      { "name":"file2.txt",
        "other_info":"other info"


    "folder": "audio",
    "files"	: [
      { "name":"sound1.mp3",
      { "name":"sound2.txt",

Javascript (main.js)

instantiate a loader with your onProgress and onComplete callback functions.

var loader = new Orbis.Loader();

Launches the asynchronous loading with the assets file path, the assets folder path and the progressBar and ProgressText CSS IDs in parameters.

loader.launch('../public/assets.json', '../public/assets/','progressBar', 'progressText').then(
    console.log(loader.getList('textures')); //get a list of a specific type of assets.
    console.log(loader.getAsset('texture1.png')); //get a loaded asset by name.

Contact me

Feel free to ask me about my work, give me suggestions, or just to say hi.