Revert "Update default MFR spinner to follow COS style guide"

This reverts commit 3fe38ed.

Author: felliott

mfr/server/static/css/mfr.css

@@ -1,40 +1,72 @@
-
-/*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);
+.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;
 }
-.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);
+@-moz-keyframes mfr-spin {
+    from {
+        -moz-transform: rotate(0deg);
+    }
+    to {
+        -moz-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);
+@-webkit-keyframes mfr-spin {
+    from {
+        -webkit-transform: rotate(0deg);
+    }
+    to {
+        -webkit-transform: rotate(360deg);
+    }
 }
-.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);
+@keyframes mfr-spin {
+    from {
+        -webkit-transform: rotate(0deg);
+        transform:rotate(0deg);
+    }
+    to {
+        -webkit-transform: rotate(360deg);
+        transform:rotate(360deg);
+    }
 }
-.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;
+@-moz-keyframes mfr-opacity {
+    0% {
+        opacity : 0.1
+    }
+    50% {
+        opacity: 1
+    }
+    100% {
+        opacity: 0.1
+    }
 }
-
-
-.ball-dark > div {
-  background-color: #337AB7;
+@-webkit-keyframes mfr-opacity {
+    0% {
+        opacity : 0.1
+    }
+    50% {
+        opacity: 1
+    }
+    100% {
+        opacity: 0.1
+    }
+}
+@keyframes mfr-opacity {
+    0% {
+        opacity : 0.1
+    }
+    50% {
+        opacity: 1
+    }
+    100% {
+        opacity: 0.1
+    }
 }
 
 .embed-responsive-pdf {
     padding-bottom: 95%;
-}
+}

mfr/server/static/images/cos_logo.png

@@ -45,15 +45,16 @@
         return el;
     }
 
-    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');
-        spinner.setAttribute('class', 'ball-pulse ball-dark text-center');
-        for(i=0; i < 3; i++){
-            spinner.appendChild(document.createElement('div'));
-        }
+    function _createSpinner(url, imgName) {
+        var parser = document.createElement('a');
+        parser.href = url;
 
+        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);
         return spinner;
     }
 
@@ -67,13 +68,11 @@
      * @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();
+        self.spinner = _createSpinner(url, imgName);
 
         self.init = function () {
             self.pymParent = new pym.Parent(self.id, self.url, self.config);