diff --git a/components/spin/index.jsx b/components/spin/index.jsx
index 2e00e710ed7fabbe835ad7f0774148936a75e4b9..7b91288280b6f0a0931b762f18fa0980de48a760 100644
--- a/components/spin/index.jsx
+++ b/components/spin/index.jsx
@@ -17,7 +17,7 @@ let AntSpin = React.createClass({
render() {
const props = this.props;
-
+
let className = classSet({
spin: 1,
[`spin-${props.type}`]: 1,
diff --git a/components/table/index.jsx b/components/table/index.jsx
index 11d2f4bd5d3cac5076691e97274c7e02f3e55316..9a57f395662ca451c4252ab77a25ff88f30a281e 100644
--- a/components/table/index.jsx
+++ b/components/table/index.jsx
@@ -5,6 +5,7 @@ import Checkbox from '../checkbox';
import FilterDropdown from './filterDropdown';
import Pagination from '../pagination';
import objectAssign from 'object-assign';
+import Spin from '../spin';
function noop() {
}
@@ -468,9 +469,6 @@ let AntTable = React.createClass({
let columns = this.renderRowSelection();
let classString = '';
let expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false;
- if (this.state.loading && !this.isLocalDataSource()) {
- classString += ' ant-table-loading';
- }
if (this.props.size === 'small') {
classString += ' ant-table-small';
}
@@ -490,7 +488,23 @@ let AntTable = React.createClass({
;
emptyClass = ' ant-table-empty';
}
- return
+ // spin holder
+ let spinEl;
+ let spinWrapperClass = '';
+ if (this.state.loading && !this.isLocalDataSource()) {
+ // if there is no pagination or no data, the height of spin should decrease by half of pagination
+ let paginationPatchClass = (this.hasPagination() && data && data.length !== 0)
+ ? 'ant-table-with-pagination'
+ : 'ant-table-without-pagination';
+ let spinClass = `${paginationPatchClass} ant-table-spin-holder`;
+
+ spinEl =
+
+
;
+
+ spinWrapperClass = ' ant-table-loading';
+ }
+ return
{emptyText}
+ {spinEl}
{this.renderPagination()}
;
}
diff --git a/style/components/table.less b/style/components/table.less
index 11a31d16817b099489bba103e3c768a0787e3bd1..77b27a0367775b0ea55edd54c12dceb9a6a7a825 100644
--- a/style/components/table.less
+++ b/style/components/table.less
@@ -82,23 +82,21 @@
&-loading {
position: relative;
.@{table-prefix-cls}-body {
- opacity: 0.42;
+ opacity: 0.6;
}
- &:after {
- position: absolute;
- display: inline-block;
- .animation(loadingCircle 1.5s infinite linear);
- content: "\e610";
- top: 50%;
- left: 50%;
- margin-top: -10px;
- margin-left: -10px;
- font-family: anticon;
- width: 20px;
+ .@{table-prefix-cls}-spin-holder {
height: 20px;
line-height: 20px;
- font-size: 20px;
- color: @primary-color;
+ left: 50%;
+ top: 50%;
+ margin-left: -30px;
+ position: absolute;
+ }
+ .@{table-prefix-cls}-with-pagination {
+ margin-top: -20px;
+ }
+ .@{table-prefix-cls}-without-pagination {
+ margin-top: 10px;
}
}