Import Loader component for demo, and add new style for loading class within a button.

Author: Tina C Lin (RD-TW)

examples/IconButtons.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Button } from '../src';
+import { Loader } from './components/Loader';
 
 export default () => {
     return (
@@ -19,11 +20,11 @@ export default () => {
 
                 <p><strong>Progressing</strong></p>
                 <Button disabled>
-                    <i className="fa fa-circle-o-notch fa-spin" />
+                    <Loader size="small" />
                     Uploading
                 </Button>
                 <Button btnStyle="primary" disabled>
-                    <i className="fa fa-circle-o-notch fa-spin" />
+                    <Loader size="small" />
                     Uploading
                 </Button>
                 <br /><br />

examples/components/Loader/index.js

@@ -0,0 +1,3 @@
+import '@trendmicro/react-loader/dist/react-loader.css';
+
+export Loader from '@trendmicro/react-loader';

package.json

@@ -54,6 +54,7 @@
     "react": "^0.14.0 || ^15.0.0"
   },
   "dependencies": {
+    "@trendmicro/react-loader": "^0.1.0",
     "classnames": "^2.2.5",
     "react-addons-shallow-compare": "^0.14.0 || ^15.0.0"
   },

src/index.styl

@@ -83,6 +83,13 @@
         padding-right: 0;
         width: 42px;
     }
+
+    // Loading class within a button
+    > [class*="loader-container"] {
+        display: inline-block;
+        margin-top: 2px;
+        margin-right: 8px;
+    }
 }
 
 // Alternate buttons
@@ -147,6 +154,12 @@
         }
     }
 
+    // Loading class within a primary button
+    > [class*="loader-container"] > [class*="loader"] {
+        border-color: rgba(255, 255, 255, 0.4);
+        border-left-color: #fff;
+    }
+
     &:active,
     &.active {
         color: #fff;