Refactoring loading message management, creation a new class to handle that (in a new project).

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJS.sln

@@ -11,6 +11,8 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BuildOurOwnBabylonJS", "Bui
 EndProject
 Project("{262852C6-CD72-467D-83FE-5EEB1973A190}") = "BuildOurOwnBabylonJSWinJSApp", "BuildOurOwnBabylonJSWinJSApp\BuildOurOwnBabylonJSWinJSApp.jsproj", "{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BuildOurOwnBabylonJSShared", "BuildOurOwnBabylonJSShared\BuildOurOwnBabylonJSShared.csproj", "{F0ABEBA9-1D9B-47C8-9033-E054BF198791}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -103,6 +105,20 @@ Global
 		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Release|x86.ActiveCfg = Release|x86
 		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Release|x86.Build.0 = Release|x86
 		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Release|x86.Deploy.0 = Release|x86
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Debug|ARM.ActiveCfg = Debug|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Debug|Mixed Platforms.ActiveCfg = Debug|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Debug|Mixed Platforms.Build.0 = Debug|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Debug|x64.ActiveCfg = Debug|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Debug|x86.ActiveCfg = Debug|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Release|Any CPU.Build.0 = Release|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Release|ARM.ActiveCfg = Release|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Release|Mixed Platforms.ActiveCfg = Release|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Release|Mixed Platforms.Build.0 = Release|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Release|x64.ActiveCfg = Release|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Release|x86.ActiveCfg = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSServer/Controllers/BuildOurOwnBabylonJSController.cs

@@ -48,6 +48,10 @@ namespace BuildOurOwnBabylonJSServer.Controllers
                         type = "image/bmp";
                         break;
 
+                    case ".css":
+                        type = "text/css";
+                        break;
+
                     default:
                         type = "text/plain";
                         break;

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSServer/Views/BabylonJSDemo/Index.cshtml

@@ -4,17 +4,12 @@
     ViewBag.BabylonJSFolder = "..\\..\\..\\";
 }
 
-<div id="loadingBack" class="loadingBack"></div>
-<div id="loadingText" class="loadingText"></div>
-
 <script type="text/javascript">
     $(document).ready(function () {
-        var loadingBack = document.getElementById("loadingBack");
-        var loadingText = document.getElementById("loadingText");
 
-        loadingBack.className = "";
-        loadingText.className = "";
-        loadingText.innerHTML = "Loading, please wait...";
+        var loading = new OURBABYLON.Loading(OURBABYLON.canvas.parentElement);
+
+        loading.show();
 
         BABYLON.SceneLoader.Load("@Html.Raw(this.BabylonJSSamplesFile("Scenes/" + (string)ViewBag.DemoFolderName))" + "@Url.Encode("/")", "@ViewBag.DemoFile", OURBABYLON.engine, function (scene) {
             OURBABYLON.sceneInitialization(scene);
@@ -28,16 +23,8 @@
             // Launch render loop
             scene.getEngine().runRenderLoop(renderLoop);
 
-            loadingBack.className = "loadingBack";
-            loadingText.className = "loadingText";
-
-        }, function (evt) {
-            if (evt.lengthComputable) {
-                loadingText.innerHTML = "Loading, please wait..." + (evt.loaded * 100 / evt.total).toFixed() + "%";
-            } else {
-                dlCount = evt.loaded / (1024 * 1024);
-                loadingText.innerHTML = "Loading, please wait..." + Math.floor(dlCount * 100.0) / 100.0 + " MB already loaded.";
-            }
-        });
+            loading.hide();
+
+        }, $.proxy(loading.onProgress, loading));
     });
 </script>

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSServer/Views/SandBox/Index.cshtml

@@ -2,17 +2,43 @@
     ViewBag.Title = "Our Own BabylonJS";
     ViewBag.BabylonJSFolder = "..\\..\\..\\";
 }
+<style>
+    #loadingInfos {
+        color: #888888;
+        cursor: default;
+        font-size: 30px;
+        height: 60px;
+        left: 0;
+        margin-top: -30px;
+        padding-top: 10px;
+        position: absolute;
+        text-align: center;
+        bottom: 0;
+        transition: transform 0.25s ease-in-out 0s;
+        width: calc(100% - 10px);
+        z-index: 3;
+        border: 5px dotted gray;
+        pointer-events: none;
+    }
+
+    #loadingInfos .content {
+        position: relative;
+        top: 50%;
+    }
+
+    .loadingInfos {
+        transform: translateX(120%);
+        -webkit-transform: translate(120%);
+    }
+</style>
 <div id="loadingInfos"><div class="content">Drag and drop your .babylon files inside, with associated assets</div></div>
-<div id="loadingBack" class="loadingBack"></div>
-<div id="loadingText" class="loadingText"></div>
+
 <script type="text/javascript">
     $(document).ready(function () {
-
-        var loadingBack = document.getElementById("loadingBack");
-        var loadingText = document.getElementById("loadingText");
-
+        var loading = new OURBABYLON.Loading(OURBABYLON.canvas.parentElement);
 
         var loadingInfos = document.getElementById("loadingInfos");
+
         loadingInfos.style.height = (OURBABYLON.canvas.height-20)+"px";
         window.addEventListener('resize', function () {
             loadingInfos.style.height = (OURBABYLON.canvas.height - 20) + "px";
@@ -20,20 +46,10 @@
 
         var filesInput = new BABYLON.FilesInput(OURBABYLON.engine, OURBABYLON.currentScene, OURBABYLON.canvas, function (sceneFile, babylonScene) {
             OURBABYLON.sceneInitialization(babylonScene, true);
-            loadingBack.className = "loadingBack";
-            loadingText.className = "loadingText";
-        }, function (evt) {
-            if (evt.lengthComputable) {
-                loadingText.innerHTML = "Loading, please wait..." + (evt.loaded * 100 / evt.total).toFixed() + "%";
-            } else {
-                dlCount = evt.loaded / (1024 * 1024);
-                loadingText.innerHTML = "Loading, please wait..." + Math.floor(dlCount * 100.0) / 100.0 + " MB already loaded.";
-            }
-        }, null, null, function () {
+            loading.hide();
+        }, $.proxy(loading.onProgress, loading), null, null, function () {
+            loading.show();
             loadingInfos.className = "loadingInfos";
-            loadingBack.className = "";
-            loadingText.className = "";
-            loadingText.innerHTML = "Loading, please wait...";
         });
         filesInput.monitorElementForDragNDrop(OURBABYLON.canvas);
     });

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSServer/Views/Shared/_Layout.cshtml

@@ -5,23 +5,23 @@
     <meta charset="utf-8" />
     <title>@ViewBag.Title</title>
     <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
-    <link href="@Url.Content("~/Content/Loading.css")" rel="stylesheet" type="text/css" />
     <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
     <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
     @if (ViewBag.DoNotUseBabylonJS == null)
     {
+        @Html.Raw(this.BabylonJSStyle(@"Tools\BuildOurOwnBabylonJS\BuildOurOwnBabylonJSShared\Style\Loading.css"))
         @Html.Raw(this.BabylonJSScript("cannon.js"))
         @Html.Raw(this.BabylonJSScript(@"Tools\BuildOurOwnBabylonJS\BuildOurOwnBabylonJS\ourOwnBabylon.js"))
+        @Html.Raw(this.BabylonJSScript(@"Tools\BuildOurOwnBabylonJS\BuildOurOwnBabylonJSShared\Scripts\Loading.js"))
         <script type="text/javascript">
-            $(document).ready(function () {
+            var OURBABYLON = OURBABYLON || {};
+            $(document).ready(function(){
                 if (!BABYLON.Engine.isSupported()) {
                     alert("Your browser does not support WebGL so you can't use BabylonJS on it");
                     return;
                 }
 
-                var OURBABYLON = {};
-
-                OURBABYLON.canvas = $("#ourOwnBabylonJSCanvas")[0];
+                OURBABYLON.canvas = document.getElementById("ourOwnBabylonJSCanvas");
                 OURBABYLON.engine = new BABYLON.Engine(OURBABYLON.canvas, true);
 
                 OURBABYLON.sceneInitialization = function (scene, attachControlToCamera) {

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSServer/WebViewPageExtensions.cs

@@ -41,6 +41,24 @@ namespace BuildOurOwnBabylonJSServer.Extensions
             return page.Html.Raw(script.ToString(TagRenderMode.Normal));
         }
 
+        public static IHtmlString BabylonJSStyle(this WebViewPage page,
+            string relPathToBabylonJSFolder) 
+        {
+            if (page == null)
+                return null;
+
+            var type = "text/css";
+
+            var src = page.BabylonJSFile(relPathToBabylonJSFolder);
+
+            var script = new TagBuilder("link");
+            script.Attributes.Add("href", src);
+            script.Attributes.Add("type", type);
+            script.Attributes.Add("rel", "stylesheet");
+
+            return page.Html.Raw(script.ToString(TagRenderMode.Normal));
+        }
+
         public static string BabylonJSSamplesFile(this WebViewPage page,
             string relPathToBabylonJSSamplesFolder)
         {

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSShared/BuildOurOwnBabylonJSShared.csproj

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="12.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
+  <PropertyGroup>
+    <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
+    <Platform Condition=" '$(Platform)' == '' ">AnyCPU</Platform>
+    <ProjectGuid>{F0ABEBA9-1D9B-47C8-9033-E054BF198791}</ProjectGuid>
+    <OutputType>Library</OutputType>
+    <AppDesignerFolder>Properties</AppDesignerFolder>
+    <RootNamespace>BuildOurOwnBabylonJSShared</RootNamespace>
+    <AssemblyName>BuildOurOwnBabylonJSShared</AssemblyName>
+    <TargetFrameworkVersion>v4.5</TargetFrameworkVersion>
+    <FileAlignment>512</FileAlignment>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU' ">
+    <DebugSymbols>true</DebugSymbols>
+    <DebugType>full</DebugType>
+    <Optimize>false</Optimize>
+    <OutputPath>bin\Debug\</OutputPath>
+    <DefineConstants>DEBUG;TRACE</DefineConstants>
+    <ErrorReport>prompt</ErrorReport>
+    <WarningLevel>4</WarningLevel>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|AnyCPU' ">
+    <DebugType>pdbonly</DebugType>
+    <Optimize>true</Optimize>
+    <OutputPath>bin\Release\</OutputPath>
+    <DefineConstants>TRACE</DefineConstants>
+    <ErrorReport>prompt</ErrorReport>
+    <WarningLevel>4</WarningLevel>
+  </PropertyGroup>
+  <ItemGroup>
+    <Reference Include="System" />
+    <Reference Include="System.Core" />
+    <Reference Include="System.Xml.Linq" />
+    <Reference Include="System.Data.DataSetExtensions" />
+    <Reference Include="Microsoft.CSharp" />
+    <Reference Include="System.Data" />
+    <Reference Include="System.Xml" />
+  </ItemGroup>
+  <ItemGroup>
+    <Compile Include="Properties\AssemblyInfo.cs" />
+  </ItemGroup>
+  <ItemGroup>
+    <Content Include="Style\Loading.css" />
+    <Content Include="Scripts\Loading.js" />
+  </ItemGroup>
+  <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
+  <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 
+       Other similar extension points exist, see Microsoft.Common.targets.
+  <Target Name="BeforeBuild">
+  </Target>
+  <Target Name="AfterBuild">
+  </Target>
+  -->
+</Project>

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSShared/Properties/AssemblyInfo.cs

@@ -0,0 +1,36 @@
+using System.Reflection;
+using System.Runtime.CompilerServices;
+using System.Runtime.InteropServices;
+
+// General Information about an assembly is controlled through the following 
+// set of attributes. Change these attribute values to modify the information
+// associated with an assembly.
+[assembly: AssemblyTitle("BuildOurOwnBabylonJSShared")]
+[assembly: AssemblyDescription("")]
+[assembly: AssemblyConfiguration("")]
+[assembly: AssemblyCompany("")]
+[assembly: AssemblyProduct("BuildOurOwnBabylonJSShared")]
+[assembly: AssemblyCopyright("Copyright ©  2014")]
+[assembly: AssemblyTrademark("")]
+[assembly: AssemblyCulture("")]
+
+// Setting ComVisible to false makes the types in this assembly not visible 
+// to COM components.  If you need to access a type in this assembly from 
+// COM, set the ComVisible attribute to true on that type.
+[assembly: ComVisible(false)]
+
+// The following GUID is for the ID of the typelib if this project is exposed to COM
+[assembly: Guid("fd7a67c2-19d4-455a-9c9c-17f50b2a08b0")]
+
+// Version information for an assembly consists of the following four values:
+//
+//      Major Version
+//      Minor Version 
+//      Build Number
+//      Revision
+//
+// You can specify all the values or you can default the Build and Revision Numbers 
+// by using the '*' as shown below:
+// [assembly: AssemblyVersion("1.0.*")]
+[assembly: AssemblyVersion("1.0.0.0")]
+[assembly: AssemblyFileVersion("1.0.0.0")]

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSShared/Scripts/Loading.js

@@ -0,0 +1,45 @@
+var OURBABYLON = OURBABYLON || {};
+
+(function () {
+    OURBABYLON.Loading = function (container, loadingMessage) {
+        //Be careful while using document.body as container, if you do not specify a 'overflow-x: hidden' it will pop a horizontal scrollbar.
+        container = container || document.body;
+
+        this._loadingBack = document.createElement("div");//loadingBackDiv;
+        this._loadingBack.id = "loadingBack";
+
+        this._loadingText = document.createElement("div");//loadingTextDiv;
+        this._loadingText.id = "loadingText";
+
+        this.hide();
+
+        container.appendChild(this._loadingBack);
+        container.appendChild(this._loadingText);
+
+        this._loadingMessage = loadingMessage || "Loading, please wait ...";
+    };
+
+    OURBABYLON.Loading.prototype.show = function () {
+        this._loadingBack.className = "";
+        this._loadingText.className = "";
+        this._loadingText.innerHTML = this._loadingMessage;
+    };
+
+    OURBABYLON.Loading.prototype.hide = function () {
+        this._loadingBack.className = "loadingBack";
+        this._loadingText.className = "loadingText";
+    };
+
+    OURBABYLON.Loading.prototype.changeMessage = function (newMessage) {
+        this._loadingText.innerHTML = newMessage;
+    };
+
+    OURBABYLON.Loading.prototype.onProgress = function (evt) {
+        if (evt.lengthComputable) {
+            this.changeMessage("Loading, please wait..." + (evt.loaded * 100 / evt.total).toFixed() + "%");
+        } else {
+            dlCount = evt.loaded / (1024 * 1024);
+            this.changeMessage("Loading, please wait..." + Math.floor(dlCount * 100.0) / 100.0 + " MB already loaded.");
+        }
+    };
+})();

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSShared/Style/Loading.css

@@ -0,0 +1,39 @@
+#loadingBack {
+    background-color: #FFFFFF;
+    border: 1px solid #888888;
+    cursor: default;
+    height: 60px;
+    left: 0;
+    margin-top: -30px;
+    position: absolute;
+    top: 50%;
+    transition: transform 0.25s ease-in-out 0s;
+    width: 100%;
+    z-index: 3;
+}
+.loadingBack {
+    transform: translateX(-120%);
+    -webkit-transform: translate(-120%);
+}
+
+
+#loadingText {
+    color: #888888;
+    cursor: default;
+    font-size: 30px;
+    height: 60px;
+    left: 0;
+    margin-top: -30px;
+    padding-top: 10px;
+    position: absolute;
+    text-align: center;
+    top: 50%;
+    transition: transform 0.25s ease-in-out 0s;
+    width: 100%;
+    z-index: 3;
+}
+
+.loadingText {
+    transform: translateX(120%);
+    -webkit-transform: translate(120%);
+}

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/BuildOurOwnBabylonJSWinJSApp.jsproj

@@ -74,6 +74,12 @@
     <Content Include="..\BuildOurOwnBabylonJS\ourOwnBabylon.js">
       <Link>js\ourOwnBabylon.js</Link>
     </Content>
+    <Content Include="..\BuildOurOwnBabylonJSShared\Scripts\Loading.js">
+      <Link>js\Shared\Loading.js</Link>
+    </Content>
+    <Content Include="..\BuildOurOwnBabylonJSShared\Style\Loading.css">
+      <Link>css\Shared\Loading.css</Link>
+    </Content>
     <Content Include="$(BabylonJSSamplesDirFullPath)Scenes\**\*.*">
       <Link>BabylonJS-Demos\%(RecursiveDir)%(Filename)%(Extension)</Link>
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/default.html

@@ -11,7 +11,7 @@
 
     <!-- BuildOurOwnBabylonJSWinJSApp references -->
     <link href="/css/default.css" rel="stylesheet" />
-    <link href="/css/Loading.css" rel="stylesheet" />
+    <link href="/css/Shared/Loading.css" rel="stylesheet" />
     <script src="/js/default.js"></script>
     <script src="/js/navigator.js"></script>
 </head>

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/babylonScene/babylonScene.html

@@ -9,7 +9,7 @@
     <title>BabylonScene</title>
     <script src="babylonScene.js"></script>
     <script src="/js/ourOwnBabylon.js"></script>
-    <script src="/js/babylonLoadingMessage.js"></script>
+    <script src="/js/Shared/Loading.js"></script>
     <link href="babylonScene.css" rel="stylesheet" />
 </head>
 <body>
@@ -19,8 +19,6 @@
         </div>
     </div>
     <div id="babylonScene">
-        <div id="loadingBack" class="loadingBack"></div>
-        <div id="loadingText" class="loadingText"></div>
         <canvas id="babylonCanvas"></canvas>
     </div>
 </body>

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/babylonScene/babylonScene.js

@@ -8,14 +8,10 @@
         ready: function (element, options) {
             var canvas = element.querySelector("#babylonCanvas");
             engine = new BABYLON.Engine(canvas, true);
-            var container = canvas.parentElement;
 
-            var loadingBack = element.querySelector("#loadingBack");
-            var loadingText = element.querySelector("#loadingText");
+            var loading = new OURBABYLON.Loading(canvas.parentElement);
 
-            loadingBack.className = "";
-            loadingText.className = "";
-            loadingText.innerHTML = "Loading, please wait...";
+            loading.show();
 
             BABYLON.SceneLoader.Load(options.babylonFolder + "/", options.babylonFile, engine, function (scene) {
                 scene.executeWhenReady(function () { 
@@ -32,17 +28,9 @@
                         scene.render();
                     });
 
-                    loadingBack.className = "loadingBack";
-                    loadingText.className = "loadingText";
+                    loading.hide();
                 });
-            }, function (evt) {
-                if (evt.lengthComputable) {
-                    loadingText.innerHTML = "Loading, please wait..." + (evt.loaded * 100 / evt.total).toFixed() + "%";
-                } else {
-                    dlCount = evt.loaded / (1024 * 1024);
-                    loadingText.innerHTML = "Loading, please wait..." + Math.floor(dlCount * 100.0) / 100.0 + " MB already loaded.";
-                }
-            });
+            }, $.proxy(loading.onProgress, loading));
 
         },
         unload: function () {

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/sandbox/sandbox.html

@@ -11,7 +11,7 @@
 
     <script src="/js/hand-1.3.6.js"></script>
     <script src="/js/ourOwnBabylon.js"></script>
-    <script src="/js/babylonLoadingMessage.js"></script>
+    <script src="/js/Shared/Loading.js"></script>
     <link href="sandbox.css" rel="stylesheet" />
 </head>
 <body>
@@ -24,8 +24,6 @@
         </div>
     </div>
     <div id="babylonScene">
-        <div id="loadingBack" class="loadingBack"></div>
-        <div id="loadingText" class="loadingText"></div>
         <canvas id="babylonCanvas"></canvas>
     </div>
 </body>

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/sandbox/sandbox.js

@@ -8,13 +8,10 @@
         ready: function (element, options) {
             var canvas = element.querySelector("#babylonCanvas");
             engine = new BABYLON.Engine(canvas);
-            var container = canvas.parentElement;
 
             var htmlInput = element.querySelector("#fileInput");
 
-            var sandboxInfos = element.querySelector("#sandboxInfos");
-            var loadingBack = element.querySelector("#loadingBack");
-            var loadingText = element.querySelector("#loadingText");
+            var loading = new OURBABYLON.Loading(canvas.parentElement);
 
             var filesInput = new BABYLON.FilesInput(engine, null, canvas, function (sceneFile, scene) {
                 if (!scene.activeCamera) {
@@ -26,21 +23,9 @@
                     var light = new BABYLON.HemisphericLight("Default light", new BABYLON.Vector3(0, 1, 0), scene);
                 }
 
-                loadingBack.className = "loadingBack";
-                loadingText.className = "loadingText";
+                loading.hide();
 
-            }, function (evt) {
-                if (evt.lengthComputable) {
-                    loadingText.innerHTML = "Loading, please wait..." + (evt.loaded * 100 / evt.total).toFixed() + "%";
-                } else {
-                    dlCount = evt.loaded / (1024 * 1024);
-                    loadingText.innerHTML = "Loading, please wait..." + Math.floor(dlCount * 100.0) / 100.0 + " MB already loaded.";
-                }
-            }, null, null, function () {
-                loadingBack.className = "";
-                loadingText.className = "";
-                loadingText.innerHTML = "Loading, please wait...";
-            });
+            }, $.proxy(loading.onProgress, loading), null, null, $.proxy(loading.show, loading));
 
             htmlInput.addEventListener("change", filesInput.loadFiles, false);