Dispatching progress

2 files changed, 19 insertions, 1 deletions

diff --git a/packages/instant/src/components/progress_bar.tsx b/packages/instant/src/components/progress_bar.tsx
new file mode 100644
index 000000000..b89c56ed5
--- /dev/null
+++ b/packages/instant/src/components/progress_bar.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Container } from './ui/container';
+import { Text } from './ui/text';
+
+export interface ProgressBarProps {
+    percentageDone: number;
+}
+export const ProgressBar: React.StatelessComponent<ProgressBarProps> = props => (
+    <Container width="100%" backgroundColor={ColorOption.white}>
+        <Container width={`${props.percentageDone}%`} backgroundColor={ColorOption.black}>
+            <Text fontColor={ColorOption.white}>{props.percentageDone}%</Text>
+        </Container>
+    </Container>
+);
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index ff19351ff..b9f8d0d92 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -4,11 +4,11 @@ import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order
 import { LatestError } from '../containers/latest_error';
 import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons';
 import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading';
+import { SelectedAssetProgressBar } from '../containers/selected_asset_progress_bar';
 
 import { ColorOption } from '../style/theme';
 
 import { Container, Flex } from './ui';
-
 export interface ZeroExInstantContainerProps {}
 
 export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
@@ -25,6 +25,7 @@ export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantConta
         >
             <Flex direction="column" justify="flex-start">
                 <SelectedAssetInstantHeading />
+                <SelectedAssetProgressBar />
                 <LatestBuyQuoteOrderDetails />
                 <Container padding="20px" width="100%">
                     <SelectedAssetBuyOrderStateButtons />