loading animation

Author: nikitaeverywhere

web/css/extras.css

@@ -0,0 +1,63 @@
+.spinner {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    display: inline-block;
+    width: 0;
+    height: 0;
+    z-index: 1;
+
+    -webkit-animation: spin 1s linear infinite;
+    -moz-animation: spin 1s linear infinite;
+    -o-animation: spin 1s linear infinite;
+    animation: spin 1s linear infinite;
+}
+
+.spinner:after {
+    content: "";
+    position: absolute;
+    left: -20px;
+    top: -20px;
+    width: 40px;
+    height: 22px;
+    border-radius: 20px 20px 0 0;
+    background: black;
+    z-index: 0;
+}
+
+.spinner:before {
+    content: "";
+    position: absolute;
+    left: -15px;
+    top: -15px;
+    width: 30px;
+    height: 30px;
+    border-radius: 15px;
+    background: white;
+    box-shadow: 0 0 5px white;
+    z-index: 1;
+}
+
+@-webkit-keyframes spin {
+    100% {
+        -webkit-transform: rotate(360deg);
+    }
+}
+
+@-moz-keyframes spin {
+    100% {
+        -moz-transform: rotate(360deg);
+    }
+}
+
+@-o-keyframes spin {
+    100% {
+        -o-transform: rotate(360deg);
+    }
+}
+
+@keyframes spin {
+    100% {
+        transform: rotate(360deg);
+    }
+}

web/css/treeView.css

@@ -1,7 +1,8 @@
 #treeView {
+    position: relative;
     display: block;
     font-size: 16px;
-    margin: 5px;
+    min-height: 100%;
 }
 
 .tv-package-name.minimized + .tv-package-content {

web/index.html

@@ -5,6 +5,7 @@
     <title>Caché UML explorer</title>
     <link rel="stylesheet" href="css/interface.css"/>
     <link rel="stylesheet" href="css/treeView.css"/>
+    <link rel="stylesheet" href="css/extras.css"/>
     <script type="text/javascript" src="js/Lib.js"></script>
     <script type="text/javascript" src="js/CacheUMLExplorer.js"></script>
     <script type="text/javascript" src="js/ClassTree.js"></script>

web/js/CacheUMLExplorer.js

@@ -18,6 +18,7 @@ CacheUMLExplorer.prototype.init = function () {
 
     var self = this;
 
+    this.classTree.showLoader();
     this.source.getClassTree(function (err, data) {
         if (!err) self.classTree.updateTree(data);
     });

web/js/ClassTree.js

@@ -6,6 +6,25 @@
 var ClassTree = function (treeViewContainer) {
 
     this.container = treeViewContainer;
+    this.loader = null;
+
+};
+
+ClassTree.prototype.showLoader = function () {
+
+    if (this.loader) return;
+
+    this.loader = document.createElement("div");
+    this.loader.className = "spinner";
+    this.container.appendChild(this.loader);
+
+};
+
+ClassTree.prototype.removeLoader = function () {
+
+    if (!this.loader) return;
+    this.loader.parentNode.removeChild(this.loader);
+    this.loader = null;
 
 };
 
@@ -72,4 +91,6 @@ ClassTree.prototype.updateTree = function (treeObject) {
 
     build(this.container, treeObject);
 
+    this.removeLoader();
+
 };