diff --git a/docs/collapse/demo/basic.md b/docs/collapse/demo/basic.md
index d392f65bce..c6bf49e4a2 100644
--- a/docs/collapse/demo/basic.md
+++ b/docs/collapse/demo/basic.md
@@ -13,33 +13,60 @@
 ---
 
 ````jsx
-import { Collapse } from '@alifd/next';
+import { Collapse, Radio } from '@alifd/next';
 
 const Panel = Collapse.Panel;
+const RadioGroup = Radio.Group;
+
+const RTL = 'rtl';
+const LTR = 'ltr';
+
+class App extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            rtl: false
+        }
+        this.handleDirectionChange = this.handleDirectionChange.bind(this);
+    }
+
+    handleDirectionChange(v) {
+        this.setState({
+            rtl: !this.state.rtl
+        });
+    }
+
+    render() {
+        return (<div>
+            <RadioGroup dataSource={['ltr', 'rtl']} value={this.state.rtl ? 'rtl' : 'ltr'} onChange={this.handleDirectionChange} />
+            <Collapse rtl={this.state.rtl}>
+                <Panel title="simple tile">
+                    <ul>
+                        <li>Promotions are marketing campaigns ran by Marketplace</li>
+                        <li>Participate to sale your products during that promotion and make a profit</li>
+                    </ul>
+                </Panel>
+                <Panel title="What are Promotion Products?">
+                    <ul>
+                        <li>Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range</li>
+                        <li>You can choose which products should be available for the promotion</li>
+                        <li>Not all Products of you will be available, because Promotions will only attract certain Product areas</li>
+                    </ul>
+                </Panel>
+                <Panel title="Why can i not submit a higher price?">
+                    <ul>
+                        <li>The Promotion requires a certain price to make sure that our customers are attracted</li>
+                    </ul>
+                </Panel>
+                <Panel title="What is Promo Stock?">
+                    Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.
+                </Panel>
+            </Collapse>
+        </div>);
+    }
+}
 
 ReactDOM.render(
-    <Collapse>
-        <Panel title="simple tile">
-            <ul>
-                <li>Promotions are marketing campaigns ran by Marketplace</li>
-                <li>Participate to sale your products during that promotion and make a profit</li>
-            </ul>
-        </Panel>
-        <Panel title="What are Promotion Products?">
-            <ul>
-                <li>Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range</li>
-                <li>You can choose which products should be available for the promotion</li>
-                <li>Not all Products of you will be available, because Promotions will only attract certain Product areas</li>
-            </ul>
-        </Panel>
-        <Panel title="Why can i not submit a higher price?">
-            <ul>
-                <li>The Promotion requires a certain price to make sure that our customers are attracted</li>
-            </ul>
-        </Panel>
-        <Panel title="What is Promo Stock?">
-            Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.
-        </Panel>
-    </Collapse>,
+    <App />,
     mountNode);
 ````
diff --git a/docs/loading/demo/basic.md b/docs/loading/demo/basic.md
index f1c068be45..63cfe8782d 100644
--- a/docs/loading/demo/basic.md
+++ b/docs/loading/demo/basic.md
@@ -16,9 +16,20 @@ a basic way to use it
 ````jsx
 import { Loading } from '@alifd/next';
 
-ReactDOM.render(<Loading tip="loading...">
-    <div className="demo">test</div>
-</Loading>, mountNode);
+ReactDOM.render(
+    <div>
+        <div>LTR
+            <Loading tip="加载中..." >
+                <div className="demo">test</div>
+            </Loading>
+        </div>
+        <div>RTL
+            <Loading tip="加载中..." rtl >
+                <div className="demo">test</div>
+            </Loading>
+        </div>
+    </div>
+    , mountNode);
 ````
 
 ````css
diff --git a/src/collapse/collapse.jsx b/src/collapse/collapse.jsx
index 8cda751cf7..16221b02ef 100644
--- a/src/collapse/collapse.jsx
+++ b/src/collapse/collapse.jsx
@@ -45,7 +45,8 @@ class Collapse extends React.Component {
          */
         accordion: PropTypes.bool,
         children: PropTypes.node,
-        id: PropTypes.string
+        id: PropTypes.string,
+        rtl: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -192,7 +193,7 @@ class Collapse extends React.Component {
     }
 
     render() {
-        const {prefix, className, style, disabled, dataSource, id} = this.props;
+        const {prefix, className, style, disabled, dataSource, id, rtl} = this.props;
         const collapseClassName = classNames({
             [`${prefix}collapse`]: true,
             [`${prefix}collapse-disabled`]: disabled,
@@ -201,7 +202,7 @@ class Collapse extends React.Component {
 
         const others = obj.pickOthers(Collapse.propTypes, this.props);
         return (
-            <div id={id} className={collapseClassName} style={style} {...others} role="presentation">
+            <div id={id} className={collapseClassName} style={style} {...others} role="presentation" dir={rtl ? 'rtl' : undefined} >
                 {dataSource ? this.getItemsByDataSource() : this.getItemsByChildren()}
             </div>
         );
diff --git a/src/collapse/main.scss b/src/collapse/main.scss
index e237b508f5..2dd673b56c 100644
--- a/src/collapse/main.scss
+++ b/src/collapse/main.scss
@@ -2,6 +2,7 @@
 @import "../core/index-noreset.scss";
 @import "scss/mixin";
 @import "scss/variable";
+@import "./rtl.scss";
 
 /* put your code here */
 #{$collapse-prefix} {
@@ -23,7 +24,7 @@
         left: $collapse-icon-margin-l;
         margin-top: -2px;
 
-        @include icon-size($collapse-icon-size, 0, 0, rotate(90deg));
+        @include icon-size($collapse-icon-size, 0, 0, rotate($collapse-icon-rotation-collapsed));
     }
 
     &-panel-title {
@@ -62,7 +63,7 @@
         }
 
         #{$collapse-prefix}-panel-icon {
-            @include icon-size($collapse-icon-size, 0, 0, rotate(180deg));
+            @include icon-size($collapse-icon-size, 0, 0, rotate($collapse-icon-rotation-expanded));
         }
     }
 
diff --git a/src/collapse/rtl.scss b/src/collapse/rtl.scss
new file mode 100644
index 0000000000..571f0fdd0f
--- /dev/null
+++ b/src/collapse/rtl.scss
@@ -0,0 +1,12 @@
+#{$collapse-prefix}[dir=rtl] {
+    #{$collapse-prefix}-panel-title {
+        padding: $collapse-title-padding-tb $collapse-icon-margin-r + $collapse-icon-margin-l + $collapse-icon-size $collapse-title-padding-tb 0;
+    }
+
+    #{$collapse-prefix}-panel-icon {
+        left: inherit;
+        right: $collapse-icon-margin-l;
+
+        @include icon-size($collapse-icon-size, 0, 0, rotate($collapse-icon-rotation-collapsed-rtl));
+    }
+}
diff --git a/src/collapse/scss/variable.scss b/src/collapse/scss/variable.scss
index f79a816a98..1a5da6c735 100644
--- a/src/collapse/scss/variable.scss
+++ b/src/collapse/scss/variable.scss
@@ -78,6 +78,10 @@ $collapse-icon-margin-r: $s-2 !default;
 /// @namespace size/icon
 $collapse-icon-margin-l: $s-3 !default;
 
+$collapse-icon-rotation-collapsed: 90deg;
+$collapse-icon-rotation-expanded: 180deg;
+$collapse-icon-rotation-collapsed-rtl: $collapse-icon-rotation-collapsed * 3;
+
 /// background
 /// @namespace statement/normal/content
 $collapse-content-bg-color: $color-white !default;
diff --git a/src/loading/index.jsx b/src/loading/index.jsx
index 8050392c63..d4f02acbeb 100644
--- a/src/loading/index.jsx
+++ b/src/loading/index.jsx
@@ -5,6 +5,8 @@ import Overlay from '../overlay';
 import ConfigProvider from '../config-provider';
 import {obj, func} from '../util';
 
+/* eslint-disable react/prefer-stateless-function */
+
 /** Loading */
 class Loading extends React.Component {
     static propTypes = {
@@ -59,7 +61,8 @@ class Loading extends React.Component {
         /**
          * should loader be displayed inline
          */
-        inline: PropTypes.bool
+        inline: PropTypes.bool,
+        rtl: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -86,7 +89,8 @@ class Loading extends React.Component {
             onVisibleChange,
             tipAlign,
             size,
-            inline
+            inline,
+            rtl
         } = this.props;
 
         let indicatorDom = null;
@@ -100,7 +104,7 @@ class Loading extends React.Component {
                 [`${prefix}loading-fusion-reactor`]: true,
                 [`${prefix}loading-medium-fusion-reactor`]: size === 'medium'
             });
-            indicatorDom = (<div className={fusionReactorCls}>
+            indicatorDom = (<div className={fusionReactorCls} dir={rtl ? 'rtl' : undefined}>
                 <span className={dotCls} style={{backgroundColor}}></span>
                 <span className={dotCls} style={{backgroundColor}}></span>
                 <span className={dotCls} style={{backgroundColor}}></span>
diff --git a/src/loading/main.scss b/src/loading/main.scss
index e50c9d5b14..42e2493569 100644
--- a/src/loading/main.scss
+++ b/src/loading/main.scss
@@ -4,6 +4,7 @@
 @import "../animate/scss/mixin.scss";
 @import "scss/mixin";
 @import "scss/variable";
+@import "./rtl.scss";
 
 /* put your code here */
 
@@ -82,6 +83,7 @@
         @include duration($loading-fusion-vector-seconds);
         @include count(infinite);
         @include function(linear);
+
         @include animation-name(nextVectorRoute);
 
         #{$loading-prefix}-dot {
@@ -152,31 +154,31 @@
 
 @include keyframes(nextVectorRoute) {
     0% {
-        @include transform(rotate(0deg));
+        @include transform(rotate($loading-fusion-vector-rotation-step * 0));
     }
     5% {
-        @include transform(rotate(90deg));
+        @include transform(rotate($loading-fusion-vector-rotation-step * 1));
     }
     25% {
-        @include transform(rotate(90deg));
+        @include transform(rotate($loading-fusion-vector-rotation-step * 1));
     }
     30% {
-        @include transform(rotate(180deg));
+        @include transform(rotate($loading-fusion-vector-rotation-step * 2));
     }
     50% {
-        @include transform(rotate(180deg));
+        @include transform(rotate($loading-fusion-vector-rotation-step * 2));
     }
     55% {
-        @include transform(rotate(270deg));
+        @include transform(rotate($loading-fusion-vector-rotation-step * 3));
     }
     75% {
-        @include transform(rotate(270deg));
+        @include transform(rotate($loading-fusion-vector-rotation-step * 3));
     }
     80% {
-        @include transform(rotate(360deg));
+        @include transform(rotate($loading-fusion-vector-rotation-step * 4));
     }
     100% {
-        @include transform(rotate(360deg));
+        @include transform(rotate($loading-fusion-vector-rotation-step * 4));
     }
 }
 
diff --git a/src/loading/rtl.scss b/src/loading/rtl.scss
new file mode 100644
index 0000000000..904edfae75
--- /dev/null
+++ b/src/loading/rtl.scss
@@ -0,0 +1,33 @@
+#{$loading-prefix}-fusion-reactor[dir=rtl] {
+    @include animation-name(nextVectorRouteRTL);
+}
+
+@include keyframes(nextVectorRouteRTL) {
+    0% {
+        @include transform(rotate($loading-fusion-vector-rotation-step-rtl * 0));
+    }
+    5% {
+        @include transform(rotate($loading-fusion-vector-rotation-step-rtl * 1));
+    }
+    25% {
+        @include transform(rotate($loading-fusion-vector-rotation-step-rtl * 1));
+    }
+    30% {
+        @include transform(rotate($loading-fusion-vector-rotation-step-rtl * 2));
+    }
+    50% {
+        @include transform(rotate($loading-fusion-vector-rotation-step-rtl * 2));
+    }
+    55% {
+        @include transform(rotate($loading-fusion-vector-rotation-step-rtl * 3));
+    }
+    75% {
+        @include transform(rotate($loading-fusion-vector-rotation-step-rtl * 3));
+    }
+    80% {
+        @include transform(rotate($loading-fusion-vector-rotation-step-rtl * 4));
+    }
+    100% {
+        @include transform(rotate($loading-fusion-vector-rotation-step-rtl * 4));
+    }
+}
diff --git a/src/loading/scss/variable.scss b/src/loading/scss/variable.scss
index 5f1df39cdf..3b40e0f29e 100644
--- a/src/loading/scss/variable.scss
+++ b/src/loading/scss/variable.scss
@@ -24,6 +24,8 @@ $loading-dot-color: $color-brand1-6 !default;
 
 $loading-fusion-vector-seconds: 5.6s;
 $loading-fusion-vector-dot-seconds: 1.4s;
+$loading-fusion-vector-rotation-step: 90deg;
+$loading-fusion-vector-rotation-step-rtl: $loading-fusion-vector-rotation-step * -1;
 
 /// width
 /// @namespace size/bounding