support custom width and height

Author: airyland

examples/index.md

@@ -2,17 +2,68 @@
 
 ---
 
-## Normal usage
+## 一般使用
 
 ````html
-<div style="border:1px dashed #ececec;width:200px;height:300px;" id="loader-box"></div>
+<div style="border:1px dashed #ececec;width:200px;height:100px;" id="loader-box"></div>
 ````
 
 ````javascript
 seajs.use('index', function(loader) {
     new loader({
-        target:'#loader-box',
+        target:'#loader-box'
+    }).show();
+});
+````
+
+## 个数设定
+
+````html
+<div style="border:1px dashed #ececec;width:200px;height:100px;" id="loader-box-2"></div>
+````
+
+````javascript
+seajs.use('index', function(loader) {
+    new loader({
+        target:'#loader-box-2',
         number:8
     }).show();
 });
 ````
+
+## 宽度设定
+
+````html
+<div style="border:1px dashed #ececec;width:200px;height:100px;" id="loader-box-3"></div>
+````
+
+````javascript
+seajs.use('index', function(loader) {
+    new loader({
+        target:'#loader-box-3',
+        number:6,
+        style:{
+            width:'20px'
+        }
+    }).show();
+});
+````
+
+## 高度设定
+
+````html
+<div style="border:1px dashed #ececec;width:200px;height:100px;" id="loader-box-4"></div>
+````
+
+````javascript
+seajs.use('index', function(loader) {
+    new loader({
+        target:'#loader-box-4',
+        number:6,
+        style:{
+            width:'20px',
+            height:'10px'
+        }
+    }).show();
+});
+````

index.js

@@ -3,33 +3,48 @@ var $ = require('jquery'),
 
 function loader(option) {
     require('./loader.css');
-    var _this = this,
-        o = {
-            number: 4,//bars numbers
-            speed: 100,
-            style: {
-                width: '8px',
-                height: '4px',
-                backgroundColor: '#CCC',
-                activeBackgroundColor: '#EA578C'
-            }
-        };
-    $.extend(o, option);
-    var barsHtml = new Array(o.number).join('<i></i>');
+    var _this = this;
+    var defaults = {
+        number: 4,//bars numbers
+        speed: 100,
+        style: {
+            width: '8px',
+            height: '4px',
+            backgroundColor: '#CCC',
+            activeBackgroundColor: '#EA578C'
+        }
+    };
+    _this.o = {};
+    $.extend(_this.o, defaults, option);
+
+    // custom style
+    var style = [];
+    for (var i in _this.o.style) {
+        if (this.o.style[i] !== defaults.style[i]) {
+            style.push(i + ':' + this.o.style[i]);
+        }
+    }
+    style = style.join(';').replace('backgroundColor', 'background-color');
+    var barsHtml = new Array(_this.o.number).join('<i style="' + style + '"></i>');
+
     this.overlay = new Overlay({
-        template: '<span class="mk-loading"><i class="mk-loading-active"></i>' + barsHtml + '</span>',
-        align: o.align,
+        template: '<span class="mk-loading"><i class="mk-loading-active" style="' + style + '"></i>' + barsHtml + '</span>',
         align: {
             selfXY: ['50%', '50%'],
             baseElement: option.target,
             baseXY: ['50%', '50%']
         }
     });
+    this.play();
+    return this;
+}
 
+loader.prototype.play = function () {
     var $loading = this.overlay.element,
         $items = $loading.find('i'),
-        length = $items.length;
-    var playInterval = setInterval(function () {
+        length = $items.length,
+        _this = this;
+    setInterval(function () {
         var $active = $loading.find('.mk-loading-active'),
             thisone = $active.index() + 1,
             lastone = thisone - 1;
@@ -38,8 +53,9 @@ function loader(option) {
             lastone = length - 1;
         }
         $items.eq(lastone).removeClass('mk-loading-active').end().eq(thisone).addClass('mk-loading-active');
-    }, o.speed);
-}
+    }, _this.o.speed);
+    return this;
+};
 
 loader.prototype.show = function () {
     this.overlay.show();