Add loading card

components/card/demo/loading.md

@@ -0,0 +1,38 @@
+# 预加载的卡片
+
+- order: 4
+
+数据读入前会有文本块样式。
+
+---
+
+````jsx
+import { Card } from 'antd';
+
+const App = React.createClass({
+  getInitialState() {
+    return {
+      loading: true,
+      content: '',
+    };
+  },
+  componentDidMount() {
+    // mock loading
+    setTimeout(() => {
+      this.setState({
+        loading: false,
+        content: '卡片的内容',
+      });
+    }, 2000);
+  },
+  render() {
+    return (
+      <Card loading={this.state.loading} title="卡片标题" style={{ width: 300 }}>
+        {this.state.content}
+      </Card>
+    );
+  },
+});
+
+ReactDOM.render(<App />, mountNode);
+````

components/card/index.jsx

@@ -2,16 +2,30 @@ import React from 'react';
 import classNames from 'classnames';
 
 export default props => {
-  const { prefixCls = 'ant-card', className, children, extra, bodyStyle, title, ...other } = props;
+  let { prefixCls = 'ant-card', className, children, extra, bodyStyle, title, loading, ...other } = props;
   const classString = classNames({
     [prefixCls]: true,
     [className]: !!className,
+    [`${prefixCls}-loading`]: loading,
   });
+
+  if (loading) {
+    children = (
+      <div>
+        <p>███████████████████████</p>
+        <p>██████　███████████████████</p>
+        <p>██████████　███████████</p>
+        <p>█████　██████　█████████████</p>
+      </div>
+    );
+  }
+
   const head = title ? (
     <div className={`${prefixCls}-head`}>
       <h3 className={`${prefixCls}-head-title`}>{title}</h3>
     </div>
   ) : null;
+
   return (
     <div {...other} className={classString}>
       {head}

style/components/card.less

@@ -34,4 +34,15 @@
   &-body {
     padding: 24px;
   }
+
+  &-loading &-body {
+    letter-spacing: -2px;
+    color: #eee;
+    font-size: 0.75rem;
+  }
+
+  &-loading &-body p {
+    word-break: break-all;
+    line-height: 2;
+  }
 }