Update default MFR loading spinner to follow OSF style

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

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.

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,12 @@
         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-scale ball-dark ball-scale-blue text-center');
+        spinner.appendChild(document.createElement('div'));
         return spinner;
     }
 
@@ -68,11 +64,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);