add success icon and new loader animation

src/js/components/inviteForm.js

@@ -5,7 +5,7 @@ var React = require('react');
 var classSet = require('classnames');
 
 var api = require('../api');
-
+var Loader = require('./loader');
 module.exports = React.createClass({
   getInitialState() {
     return {
@@ -99,11 +99,11 @@ module.exports = React.createClass({
           disabled={this.state.error || this.state.submitted}>
           ⏎
         </button>
-        <span
-          className='loader'>
-        </span>
+        <div className='invite-form__loader'>
+          <Loader />
+        </div>
         {feedbackMessage}
       </form>
-      )
+    );
   }
 });

src/js/components/loader.js

@@ -0,0 +1,12 @@
+const React = require('react');
+
+module.exports = function Loader() {
+  return (
+    <div className='sk-folding-cube'>
+      <div className='sk-cube1 sk-cube'></div>
+      <div className='sk-cube2 sk-cube'></div>
+      <div className='sk-cube4 sk-cube'></div>
+      <div className='sk-cube3 sk-cube'></div>
+    </div>
+  );
+};

src/js/components/membershipForm.js

@@ -18,6 +18,14 @@ module.exports = React.createClass({
     }
     return (
       <div>
+        <svg height='50' width='50' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'>
+          <path
+            fill='#349c4a'
+            d='M256 6.998c-137.533 0-249 111.467-249 249 0 137.534 111.467 249 249 249s249-111.467 249-249c0-137.534-111.467-249-249-249zm0 478.08c-126.31 0-229.08-102.77-229.08-229.08 0-126.31 102.77-229.08 229.08-229.08 126.31 0 229.08 102.77 229.08 229.08 0 126.31-102.77 229.08-229.08 229.08z' />
+          <path
+            fill='#349c4a'
+            d='M384.235 158.192L216.92 325.518 127.86 236.48l-14.142 14.144 103.2 103.18 181.36-181.47' />
+        </svg>
         <p> Maksu ja rekisteröityminen onnistui.</p>
         <p> Tervetuloa Koodiklinikka ry:n jäseneksi!</p>
       </div>

src/js/components/membershipInfoForm.js

@@ -4,9 +4,10 @@ var _ = require('lodash');
 var request = require('axios');
 var React = require('react');
 var classSet = require('classnames');
+var StripeCheckout = require('react-stripe-checkout').default;
 
 var api = require('../api');
-var StripeCheckout = require('react-stripe-checkout').default;
+var Loader = require('./loader');
 var config = require('../../config.js')();
 
 var fieldNameTranslations = {
@@ -152,9 +153,16 @@ module.exports = React.createClass({
         </span>
       );
     });
-
+    if (this.state.sending) {
+      return (
+        <div className='membership-form__loader'>
+          <Loader />
+        </div>
+      );
+    }
     return (
       <div>
+        <h3>Liity jäseneksi</h3>
         <form className={formClasses}>
           {inputFields}
           {this.state.error && (