Progress Indicator

bin/progressIndicatorStyling.css

@@ -0,0 +1,23 @@
+.progressIndicator {
+  border: 16px solid #f3f3f3;
+  border-radius: 50%;
+  border-top: 16px solid blue;
+  border-right: 16px solid green;
+  border-bottom: 16px solid red;
+  border-left: 16px solid yellow;
+  width: 120px;
+  height: 120px;
+  -webkit-animation: spin 2s linear infinite;
+  animation: spin 2s linear infinite;
+
+}
+
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg);   m }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

src/components/ProgressIndicator.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const ProgressIndicator = () => (
+	<div className= "progressIndicator"></div>
+);
+
+export default ProgressIndicator;

src/views/UploadForm.js

@@ -1,6 +1,7 @@
 import Button from './../components/Button';
 import ConceptInput from './../components/ConceptInput';
 import DropArea from './../components/DropArea';
+import ProgressIndicator from './../components/ProgressIndicator';
 import React from 'react';
 import SentimentAnalysisGraph from './../components/SentimentAnalysisGraph';
 
@@ -10,6 +11,7 @@ const UploadForm = () => (
 		<Button />
 		<ConceptInput />
 		<SentimentAnalysisGraph />
+		<ProgressIndicator />
 	</div>
 );