Integration of the Upload Popup

src/container/ProgressBar.jsx

@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+
+class ProgressBar extends Component {
+  render () {
+    return (
+      <div className='container-fluid'>
+        <div className='row'>
+          <div className='col-md-3 col-sm-6'>
+            <div className='progress blue'>
+              <span className='progress-left'>
+                <span className='progress-bar' />
+              </span>
+              <span className='progress-right'>
+                <span className='progress-bar' />
+              </span>
+              <div className='progress-value'>
+                90%
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default ProgressBar

src/container/UploadPopup.jsx

@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+import ProgressBar from './ProgressBar.jsx'
+
+class UploadPopup extends Component {
+  render () {
+    return (
+      <div className='uploadpopup'>
+        <div className='uploadpopup__wrapper card'>
+          <div className='card-body'>
+
+            <div className='uploadpopup__closepopup'>
+              <i className='fa fa-times' />
+            </div>
+
+            <div className='uploadpopup__progress'>
+              <div className='uploadpopup__progress__bar'>
+                <ProgressBar />
+              </div>
+
+              <div className='uploadpopup__progress__filename'>
+                Nom du Fichier
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default UploadPopup

src/css/ProgressBar.styl

@@ -0,0 +1,126 @@
+.progress
+    width 150px
+    height 150px
+    line-height 150px
+    background none
+    margin 0 auto
+    position relative
+
+.progressafter
+    content ""
+    width 100%
+    height 100%
+    border-radius 50%
+    border 12px solid off-white
+    position absolute
+    top 0
+    left 0
+
+.progress > span
+    width 50%
+    height 100%
+    overflow hidden
+    position absolute
+    top 0
+    z-index 1
+
+.progress .progress-left
+    left 0
+
+.progress .progress-bar
+    width 100%
+    height 100%
+    background none
+    border-width 12px
+    border-style solid
+    position absolute
+    top 0
+
+.progress .progress-left .progress-bar
+    left 100%
+    border-top-right-radius 80px
+    border-bottom-right-radius 80px
+    border-left 0
+    -webkit-transform-origin center left
+    transform-origin center left
+
+.progress .progress-right
+    right 0
+
+.progress .progress-right .progress-bar
+    left -100%
+    border-top-left-radius 80px
+    border-bottom-left-radius 80px
+    border-right 0
+    -webkit-transform-origin center right
+    transform-origin center right
+    animation loading-1 1.8s linear forwards
+
+.progress .progress-value
+    display flex
+    justify-content center
+    align-items center
+    width 90%
+    height 90%
+    border 10px solid off-white
+    border-radius 50%
+    background darkBlue
+    font-size 24px
+    color off-white
+    line-height 135px
+    text-align center
+    position absolute
+    top 5%
+    left 5%
+
+
+.progress.blue .progress-bar
+    border-color blue
+
+.progress.blue .progress-left .progress-bar
+    animation loading-2 1.5s linear forwards 1.8s
+
+@keyframes loading-1
+    0%
+        -webkit-transform rotate(0deg)
+        transform rotate(0deg)
+
+    100%
+        -webkit-transform rotate(180deg)
+        transform rotate(180deg)
+
+@keyframes loading-2
+    0%
+        -webkit-transform rotate(0deg)
+        transform rotate(0deg)
+
+    100%
+        -webkit-transform rotate(144deg)
+        transform rotate(144deg)
+
+@keyframes loading-3
+    0%
+        -webkit-transform rotate(0deg)
+        transform rotate(0deg)
+
+    100%
+        -webkit-transform rotate(90deg)
+        transform rotate(90deg)
+
+@keyframes loading-4
+    0%
+        -webkit-transform rotate(0deg)
+        transform rotate(0deg)
+
+    100%
+        -webkit-transform rotate(36deg)
+        transform rotate(36deg)
+
+@keyframes loading-5
+    0%
+        -webkit-transform rotate(0deg)
+        transform rotate(0deg)
+
+    100%
+        -webkit-transform rotate(126deg)
+        transform rotate(126deg)

src/css/UploadPopup.styl

@@ -0,0 +1,29 @@
+.uploadpopup
+  position fixed
+  top 0
+  left 0
+  display flex
+  justify-content center
+  width 100%
+  height 100%
+  z-index 3
+  &__wrapper
+    margin-top 120px
+    width 400px
+    height 350px
+    background off-white
+    box-shadow shadow-all
+  &__closepopup
+    display flex
+    justify-content flex-end
+    cursor pointer
+  &__progress
+    display flex
+    flex-direction column
+    align-items center
+    padding 40px 0
+    &__filename
+      margin-top 30px
+      font-size 25px
+
+