Update default MFR spinner to follow COS style guide

 * Users prefer the pulsing ball to the COS-logo spinner. See
   https://centerforopenscience.github.io/osf-style/style.html#loader

   Note: this doesn't (really) affect the iframe content served by
   MFR.  Instead, this changes happens in the mfr.js and mfr.css files
   loaded from MFR by the site hosting the iframe.  The fact that
   mfr.js is included in most iframe content templates is a
   development artifact and will be eventually removed.

 [SVCS-566]

Author: AddisonSchiller

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);