[improvement] Loading: jsx (#2540)

packages/loading/index.js

@@ -0,0 +1,52 @@
+import { use } from '../utils';
+
+const [sfc, bem] = use('loading');
+const DEFAULT_COLOR = '#c9c9c9';
+
+export default sfc({
+  props: {
+    size: String,
+    type: {
+      type: String,
+      default: 'circular'
+    },
+    color: {
+      type: String,
+      default: DEFAULT_COLOR
+    }
+  },
+
+  render(h) {
+    const { color, size, type } = this;
+
+    const colorType = color === 'white' || color === 'black' ? color : '';
+
+    const style = {
+      color: color === 'black' ? DEFAULT_COLOR : color,
+      width: size,
+      height: size
+    };
+
+    const Spin = [];
+    if (type === 'spinner') {
+      for (let i = 0; i < 12; i++) {
+        Spin.push(<i />);
+      }
+    }
+
+    const Circular = type === 'circular' && (
+      <svg class={bem('circular')} viewBox="25 25 50 50">
+        <circle cx="50" cy="50" r="20" fill="none" />
+      </svg>
+    );
+
+    return (
+      <div class={bem([type, colorType])} style={style}>
+        <span class={bem('spinner', type)}>
+          {Spin}
+          {Circular}
+        </span>
+      </div>
+    );
+  }
+});