{
expect(wrapper.find('.ant-spin-nested-loading').at(0).prop('style')).toBe(null);
expect(wrapper.find('.ant-spin').at(0).prop('style').background).toBe('red');
});
+
+ it('should render custom indicator when it\'s set', () => {
+ const customIndicator =
;
+ const wrapper = shallow(
+
+ );
+ expect(wrapper.contains(customIndicator)).toEqual(true);
+ });
});
diff --git a/components/spin/demo/custom-indicator.md b/components/spin/demo/custom-indicator.md
new file mode 100644
index 0000000000..e4b9618900
--- /dev/null
+++ b/components/spin/demo/custom-indicator.md
@@ -0,0 +1,56 @@
+---
+order: 0
+title:
+ zh-CN: 自定义指示符
+ en-US: Custom spinning indicator
+---
+
+## zh-CN
+
+使用自定义指示符。
+
+## en-US
+
+Use custom loading indicator.
+
+````jsx
+import { Spin, Icon } from 'antd';
+
+const antIcon =
;
+const squareLoader =
;
+
+ReactDOM.render(
+
+
+
+
, mountNode);
+````
+
+```css
+.square-loader {
+ width: 24px;
+ height: 24px;
+ background-color: #108ee9;
+ -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
+ animation: sk-rotateplane 1.2s infinite ease-in-out;
+}
+
+@-webkit-keyframes sk-rotateplane {
+ 0% { -webkit-transform: perspective(120px) }
+ 50% { -webkit-transform: perspective(120px) rotateY(180deg) }
+ 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
+}
+
+@keyframes sk-rotateplane {
+ 0% {
+ transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+ -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
+ } 50% {
+ transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+ -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
+ } 100% {
+ transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+ -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+ }
+}
+```
diff --git a/components/spin/index.en-US.md b/components/spin/index.en-US.md
index c1432650ee..236c9b62f7 100644
--- a/components/spin/index.en-US.md
+++ b/components/spin/index.en-US.md
@@ -15,6 +15,7 @@ When part of the page is waiting for asynchronous data or during a rendering pro
| Property | Description | Type | Default Value |
| -------- | ----------- | ---- | ------------- |
| delay | specifies a delay in milliseconds for loading state (prevent flush) | number (milliseconds) | - |
+| indicator | React node of the spinning indicator | ReactNode | - |
| size | size of Spin, options: `small`, `default` and `large` | string | `default` |
| spinning | whether Spin is spinning | boolean | true |
| tip | customize description content when Spin has children | string | - |
diff --git a/components/spin/index.tsx b/components/spin/index.tsx
index 58ae225333..a540fab6bb 100644
--- a/components/spin/index.tsx
+++ b/components/spin/index.tsx
@@ -13,6 +13,7 @@ export interface SpinProps {
tip?: string;
delay?: number;
wrapperClassName?: string;
+ indicator?: React.ReactNode;
}
export default class Spin extends React.Component
{
@@ -29,6 +30,7 @@ export default class Spin extends React.Component {
spinning: PropTypes.bool,
size: PropTypes.oneOf(['small', 'default', 'large']),
wrapperClassName: PropTypes.string,
+ indicator: PropTypes.node,
};
debounceTimeout: number;
@@ -89,7 +91,7 @@ export default class Spin extends React.Component {
}
}
render() {
- const { className, size, prefixCls, tip, wrapperClassName, ...restProps } = this.props;
+ const { className, size, prefixCls, tip, wrapperClassName, indicator, ...restProps } = this.props;
const { spinning, notCssAnimationSupported } = this.state;
const spinClassName = classNames(prefixCls, {
@@ -105,14 +107,18 @@ export default class Spin extends React.Component {
'delay',
]);
+ const spinIndicator = indicator ? indicator : (
+
+
+
+
+
+
+ );
+
const spinElement = (
-
-
-
-
-
-
+ {spinIndicator}
{tip ?
{tip}
: null}