Improved ProgressBar, added Spinner

src/plugins/Progressbar.js

@@ -4,7 +4,7 @@ import Plugin from './Plugin'
  * Progress bar
  *
  */
-export default class Progress extends Plugin {
+export default class ProgressBar extends Plugin {
   constructor (core, opts) {
     super(core, opts)
     this.type = 'progress'
@@ -14,15 +14,21 @@ export default class Progress extends Plugin {
 
     // merge default options with the ones set by user
     this.opts = Object.assign({}, defaultOptions, opts)
+  }
 
-    this.progressBarElement = document.querySelector('.UppyDragDrop-progressInner')
+  setProgress (percentage) {
+    this.progressBarPercentageEl.innerHTML = percentage
+    this.progressBarInnerEl.setAttribute('style', `width: ${percentage}%`)
   }
 
-  progressBar (percentage) {
-    const progressContainer = document.querySelector(this.opts.target)
-    progressContainer.innerHTML = '<div class="UppyProgressBar"></div>'
-    const progressBarElement = document.querySelector(`${this.opts.target} .UppyProgressBar`)
-    progressBarElement.setAttribute('style', `width: ${percentage}%`)
+  initProgressBar () {
+    const progressBarContainerEl = document.querySelector(this.opts.target)
+    progressBarContainerEl.innerHTML = `<div class="UppyProgressBar">
+      <div class="UppyProgressBar-inner"></div>
+      <div class="UppyProgressBar-percentage"></div>
+    </div>`
+    this.progressBarPercentageEl = document.querySelector(`${this.opts.target} .UppyProgressBar-percentage`)
+    this.progressBarInnerEl = document.querySelector(`${this.opts.target} .UppyProgressBar-inner`)
   }
 
   initEvents () {
@@ -30,13 +36,15 @@ export default class Progress extends Plugin {
       const percentage = data.percentage
       const plugin = data.plugin
       this.core.log(
-        `this is what the progress is: ${percentage}, and its set by ${plugin.constructor.name}`
+        `progress is: ${percentage}, set by ${plugin.constructor.name}`
       )
-      this.progressBar(percentage)
+      this.setProgress(percentage)
     })
   }
 
   install () {
-    return this.initEvents()
+    this.initProgressBar()
+    this.initEvents()
+    return
   }
 }

src/plugins/Spinner.js

@@ -0,0 +1,49 @@
+import Plugin from './Plugin'
+
+/**
+ * Spinner
+ *
+ */
+export default class ProgressBar extends Plugin {
+  constructor (core, opts) {
+    super(core, opts)
+    this.type = 'progress'
+
+    // set default options
+    const defaultOptions = {}
+
+    // merge default options with the ones set by user
+    this.opts = Object.assign({}, defaultOptions, opts)
+  }
+
+  setProgress (percentage) {
+    if (percentage !== 100) {
+      this.spinnerEl.classList.add('is-spinning');
+    } else {
+      this.spinnerEl.classList.remove('is-spinning');
+    }
+  }
+
+  initSpinner () {
+    const spinnerContainer = document.querySelector(this.opts.target)
+    spinnerContainer.innerHTML = `<div class="UppySpinner"></div>`
+    this.spinnerEl = document.querySelector(`${this.opts.target} .UppySpinner`)
+  }
+
+  initEvents () {
+    this.core.emitter.on('progress', data => {
+      const percentage = data.percentage
+      const plugin = data.plugin
+      this.core.log(
+        `progress is: ${percentage}, set by ${plugin.constructor.name}`
+      )
+      this.setProgress(percentage)
+    })
+  }
+
+  install () {
+    this.initSpinner()
+    this.initEvents()
+    return
+  }
+}

src/scss/_progressbar.scss

@@ -0,0 +1,16 @@
+.UppyProgressBar {
+  background-color: lighten($color-pink, 30%);
+  width: 80%;
+  height: 3px;
+  margin: 15px auto;
+}
+
+.UppyProgressBar-inner {
+  background-color: $color-pink;
+  height: 100%;
+  width: 0;
+}
+
+.UppyProgressBar-percentage {
+  text-align: center;
+}

src/scss/_spinner.scss

@@ -0,0 +1,30 @@
+.UppySpinner {
+  width: 40px;
+  height: 40px;
+  margin: 100px auto;
+}
+
+.UppySpinner.is-spinning {
+  background-color: $color-pink;
+  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
+  animation: sk-rotateplane 1.2s infinite ease-in-out;
+}
+
+@-webkit-keyframes sk-rotateplane {
+  0% { -webkit-transform: perspective(120px) }
+  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
+  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
+}
+
+@keyframes sk-rotateplane {
+  0% {
+    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
+  } 50% {
+    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
+  } 100% {
+    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+  }
+}

src/scss/uppy.scss

@@ -4,10 +4,5 @@
 
 @import '_variables.scss';
 @import '_dragdrop.scss';
-
-.uppy {
-  font-family: "Comic Sans MS";
-  color: purple;
-  border: 1px dashed pink;
-  font-size: 32px;
-}
+@import '_progressbar.scss';
+@import '_spinner.scss';

website/src/examples/dragdrop/app.es6

@@ -2,19 +2,21 @@
 // import { DragDrop, Progressbar, Tus10 } from 'uppy/plugins'
 import Uppy from '../../../../src/core/Core.js'
 import DragDrop from '../../../../src/plugins/DragDrop.js'
-import Progressbar from '../../../../src/plugins/Progressbar.js'
+import ProgressBar from '../../../../src/plugins/ProgressBar.js'
+import Spinner from '../../../../src/plugins/Spinner.js'
 import Tus10 from '../../../../src/plugins/Tus10.js'
 
-const uppyOne = new Uppy({autoProceed: true, debug: true})
+const uppyOne = new Uppy({debug: true})
 uppyOne
   .use(DragDrop, {target: '.UppyDragDrop-One'})
   .use(Tus10, {endpoint: 'http://master.tus.io:8080/files/'})
-  .use(Progressbar, {target: '.UppyDragDrop-One .UppyDragDrop-progress'})
+  .use(ProgressBar, {target: '.UppyDragDrop-One-Progress'})
+  .use(Spinner, {target: '.UppyDragDrop-One-Spinner'})
   .run()
 
-const uppyTwo = new Uppy({debug: true})
+const uppyTwo = new Uppy({debug: true, autoProceed: false})
 uppyTwo
   .use(DragDrop, {target: '#UppyDragDrop-Two'})
   .use(Tus10, {endpoint: 'http://master.tus.io:8080/files/'})
-  .use(Progressbar, {target: '#UppyDragDrop-Two .UppyDragDrop-progress'})
+  .use(ProgressBar, {target: '.UppyDragDrop-Two-Progress'})
   .run()

website/src/examples/dragdrop/app.html

@@ -7,6 +7,13 @@
 
     <!-- Target DOM node #1 -->
     <div class="UppyDragDrop-One"></div>
+
+    <!-- Progress bar #1 -->
+    <div class="UppyDragDrop-One-Progress"></div>
+
+    <!-- Spinner #1 -->
+    <div class="UppyDragDrop-One-Spinner"></div>
+
   </div>
 
   <div class="column-1-2">
@@ -14,5 +21,8 @@
 
     <!-- Target DOM node #2 -->
     <div id="UppyDragDrop-Two"></div>
+
+    <!-- Progress bar #2 -->
+    <div class="UppyDragDrop-Two-Progress"></div>
   </div>
 </div>