ProgressBar.js

ShadowEditor.Web/assets/css/main.css

@@ -407,6 +407,19 @@ div.Category .item input {
     margin-right: 4px;
 }
 
+div.ProgressBar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+}
+
+div.ProgressBar .Bar {
+    width: 30%;
+    height: 4px;
+    background-color: #88ee88;
+}
+
 div.Table {
     width: 500px;
     height: 300px;

ShadowEditor.Web/src/editor/Viewport.js

@@ -18,7 +18,10 @@ Viewport.prototype.render = function () {
         xtype: 'div',
         id: 'viewport',
         parent: this.parent,
-        cls: 'viewport'
+        cls: 'viewport',
+        children: [{
+            xtype: 'progressbar',
+        }],
     });
     this.container.render();
 };

ShadowEditor.Web/src/ui/ProgressBar.js

@@ -8,13 +8,43 @@ import UI from './Manager';
  */
 function ProgressBar(options = {}) {
     Control.call(this, options);
+
+    this.max = options.max || 100;
+    this.current = options.current || 0;
+
+    this.cls = options.cls || 'ProgressBar';
+    this.style = options.style || null;
 }
 
 ProgressBar.prototype = Object.create(Control.prototype);
 ProgressBar.prototype.constructor = ProgressBar;
 
 ProgressBar.prototype.render = function () {
+    this.dom = document.createElement('div');
+    this.parent.appendChild(this.dom);
 
+    if (this.cls) {
+        this.dom.className = this.cls;
+    }
+
+    if (this.style) {
+        Object.assign(this.dom.style, this.style);
+    }
+
+    this.bar = document.createElement('div');
+    this.dom.appendChild(this.bar);
+
+    this.bar.className = 'Bar';
+};
+
+ProgressBar.prototype.getCurrent = function () {
+    return this.current;
+};
+
+ProgressBar.prototype.setCurrent = function (value) {
+    this.current = value;
+
+    this.bar.style.width = (this.current / this.max * 100) + '%';
 };
 
 UI.addXType('progressbar', ProgressBar);

ShadowEditor.Web/src/ui/UI.js

@@ -43,6 +43,7 @@ import './Category';
 import './DataTable';
 import './Tree';
 import './Icon';
+import './ProgressBar';
 
 // 添加一些实用功能
 Object.assign(UI, {