Merge branch 'feature/pulsing-spinner' into develop

 [SVCS-566]
 Closes: #293

Author: felliott

mfr/server/static/css/mfr.css

@@ -1,72 +1,40 @@
-.mfr-logo-spin {
-    -webkit-animation: mfr-spin 3s infinite linear, mfr-opacity 3s infinite linear;
-    -moz-animation: mfr-spin 3s infinite linear mfr-opacity 3s infinite linear;
-    animation: mfr-spin 3s infinite linear, mfr-opacity 3s infinite linear;
-    position: absolute;
-    top: 0;
-    left: 50%;
-    z-index: -1;
-}
-@-moz-keyframes mfr-spin {
-    from {
-        -moz-transform: rotate(0deg);
-    }
-    to {
-        -moz-transform: rotate(360deg);
-    }
+
+/*The osf will ask for this file. It is never actually linked to anything specific in MFR.
+This CSS was stripped out of base.css from the osf-style repo.
+*/
+
+.ball-pulse > div:nth-child(0) {
+  -webkit-animation: scale 0.75s -0.36s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+          animation: scale 0.75s -0.36s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
 }
-@-webkit-keyframes mfr-spin {
-    from {
-        -webkit-transform: rotate(0deg);
-    }
-    to {
-        -webkit-transform: rotate(360deg);
-    }
+.ball-pulse > div:nth-child(1) {
+  -webkit-animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+          animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
 }
-@keyframes mfr-spin {
-    from {
-        -webkit-transform: rotate(0deg);
-        transform:rotate(0deg);
-    }
-    to {
-        -webkit-transform: rotate(360deg);
-        transform:rotate(360deg);
-    }
+.ball-pulse > div:nth-child(2) {
+  -webkit-animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+          animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
 }
-@-moz-keyframes mfr-opacity {
-    0% {
-        opacity : 0.1
-    }
-    50% {
-        opacity: 1
-    }
-    100% {
-        opacity: 0.1
-    }
+.ball-pulse > div:nth-child(3) {
+  -webkit-animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+          animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
 }
-@-webkit-keyframes mfr-opacity {
-    0% {
-        opacity : 0.1
-    }
-    50% {
-        opacity: 1
-    }
-    100% {
-        opacity: 0.1
-    }
+.ball-pulse > div {
+  background-color: #fff;
+  width: 15px;
+  height: 15px;
+  border-radius: 100%;
+  margin: 2px;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  display: inline-block;
 }
-@keyframes mfr-opacity {
-    0% {
-        opacity : 0.1
-    }
-    50% {
-        opacity: 1
-    }
-    100% {
-        opacity: 0.1
-    }
+
+
+.ball-dark > div {
+  background-color: #337AB7;
 }
 
 .embed-responsive-pdf {
     padding-bottom: 95%;
-}
+}

mfr/server/static/images/cos_logo.png

@@ -45,16 +45,15 @@
         return el;
     }
 
-    function _createSpinner(url, imgName) {
-        var parser = document.createElement('a');
-        parser.href = url;
-
+    function _createSpinner() {
+        // The the OSF asks for the CSS for this spinner (/static/css/mfr)
+        // MFR itself does not use it anywhere
         var spinner = document.createElement('div');
-        var img = document.createElement('img');
-        spinner.setAttribute('class', 'mfr-logo-spin text-center');
-        imgName = imgName || 'loading.png';
-        img.setAttribute('src', parser.protocol + '//' + parser.host + '/static/images/' + imgName);
-        spinner.appendChild(img);
+        spinner.setAttribute('class', 'ball-pulse ball-dark text-center');
+        for(i=0; i < 3; i++){
+            spinner.appendChild(document.createElement('div'));
+        }
+
         return spinner;
     }
 
@@ -68,11 +67,13 @@
      * @param {String} imgName The filename of an image in mfr/server/static/images/ to use as a loading spinner
      */
     lib.Render = function (id, url, config, imgName) {
+        // we no longer use this, but need to support it as an arg till the OSF side is fixed
+        imgName = undefined;
         var self = this;
         self.id = id;
         self.url = url;
         self.config = config;
-        self.spinner = _createSpinner(url, imgName);
+        self.spinner = _createSpinner();
 
         self.init = function () {
             self.pymParent = new pym.Parent(self.id, self.url, self.config);