Replace spinner.gif with CSS solution

Bug: T219163
Change-Id: Icca5c4e01fe4c0ae377245ae7afb456a17626208

diff --git a/resources/Resources.php b/resources/Resources.php
index 5e5f308..8da38a8 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -294,7 +294,7 @@ return [
        ],
        'jquery.spinner' => [
                'scripts' => 'resources/src/jquery.spinner/spinner.js',
-               'styles' => 'resources/src/jquery.spinner/spinner.css',
+               'styles' => 'resources/src/jquery.spinner/spinner.less',
                'targets' => [ 'desktop', 'mobile' ],
        ],
        'jquery.jStorage' => [

diff --git a/resources/src/jquery.spinner/images/spinner-large.gif b/resources/src/jquery.spinner/images/spinner-large.gif
deleted file mode 100644 (file)
index 72203fd..0000000
Binary files a/resources/src/jquery.spinner/images/spinner-large.gif and /dev/null differ

diff --git a/resources/src/jquery.spinner/images/spinner.gif b/resources/src/jquery.spinner/images/spinner.gif
deleted file mode 100644 (file)
index 6146be4..0000000
Binary files a/resources/src/jquery.spinner/images/spinner.gif and /dev/null differ

diff --git a/resources/src/jquery.spinner/spinner.css b/resources/src/jquery.spinner/spinner.css
deleted file mode 100644 (file)
index 9c819a6..0000000
--- a/resources/src/jquery.spinner/spinner.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.mw-spinner {
-       background-color: transparent;
-       background-position: center center;
-       background-repeat: no-repeat;
-}
-
-.mw-spinner-small {
-       /* @embed */
-       background-image: url( images/spinner.gif );
-       height: 20px;
-       width: 20px;
-       /* Avoid issues with .mw-spinner-block when floated without width. */
-       min-width: 20px;
-}
-
-.mw-spinner-large {
-       /* @embed */
-       background-image: url( images/spinner-large.gif );
-       height: 32px;
-       width: 32px;
-       /* Avoid issues with .mw-spinner-block when floated without width. */
-       min-width: 32px;
-}
-
-.mw-spinner-block {
-       display: block;
-       /* This overrides width from .mw-spinner-large / .mw-spinner-small,
-        * This is where the min-width kicks in.
-        */
-       width: 100%;
-}
-
-.mw-spinner-inline {
-       display: inline-block;
-       vertical-align: middle;
-}

diff --git a/resources/src/jquery.spinner/spinner.js b/resources/src/jquery.spinner/spinner.js
index 5dfbab7..8cccedb 100644 (file)
--- a/resources/src/jquery.spinner/spinner.js
+++ b/resources/src/jquery.spinner/spinner.js
@@ -59,7 +59,7 @@
                 * @return {jQuery}
                 */
                createSpinner: function ( opts ) {
-                       var $spinner;
+                       var i, $spinner, $container;
 
                        if ( typeof opts === 'string' ) {
                                opts = {
@@ -74,8 +74,14 @@
                                $spinner.attr( 'id', 'mw-spinner-' + opts.id );
                        }
 
-                       $spinner.addClass( opts.size === 'large' ? 'mw-spinner-large' : 'mw-spinner-small' );
-                       $spinner.addClass( opts.type === 'block' ? 'mw-spinner-block' : 'mw-spinner-inline' );
+                       $spinner
+                               .addClass( opts.size === 'large' ? 'mw-spinner-large' : 'mw-spinner-small' )
+                               .addClass( opts.type === 'block' ? 'mw-spinner-block' : 'mw-spinner-inline' );
+
+                       $container = $( '<div>' ).addClass( 'mw-spinner-container' ).appendTo( $spinner );
+                       for ( i = 0; i < 12; i++ ) {
+                               $container.append( $( '<div>' ) );
+                       }
 
                        return $spinner;
                },

diff --git a/resources/src/jquery.spinner/spinner.less b/resources/src/jquery.spinner/spinner.less
new file mode 100644 (file)
index 0000000..596858e
--- /dev/null
+++ b/resources/src/jquery.spinner/spinner.less
@@ -0,0 +1,143 @@
+.mw-spinner {
+       position: relative;
+
+       > .mw-spinner-container {
+               transform-origin: 0 0;
+       }
+}
+
+@mw-spinner-small-size: 20px;
+@mw-spinner-large-size: 32px;
+
+.mw-spinner-small {
+       width: @mw-spinner-small-size;
+       height: @mw-spinner-small-size;
+
+       > .mw-spinner-container {
+               transform: scale( unit( @mw-spinner-small-size / 64 ) );
+       }
+}
+
+.mw-spinner-large {
+       width: @mw-spinner-large-size;
+       height: @mw-spinner-large-size;
+
+       > .mw-spinner-container {
+               transform: scale( unit( @mw-spinner-large-size / 64 ) );
+       }
+}
+
+.mw-spinner-block {
+       display: block;
+       width: 100%;
+       text-align: center;
+
+       > .mw-spinner-container {
+               display: inline-block;
+               vertical-align: top;
+       }
+
+       &.mw-spinner-small > .mw-spinner-container {
+               min-width: @mw-spinner-small-size;
+       }
+
+       &.mw-spinner-large > .mw-spinner-container {
+               min-width: @mw-spinner-large-size;
+       }
+}
+
+.mw-spinner-inline {
+       display: inline-block;
+       vertical-align: middle;
+}
+
+/**
+ * CSS loading spinner adapted from loadingio, CC0
+ * https://github.com/loadingio/css-spinner/
+ */
+.mw-spinner-container > div {
+       transform-origin: 32px 32px;
+       animation: mw-spinner 1.2s linear infinite;
+}
+
+.mw-spinner-container > div:after {
+       content: ' ';
+       display: block;
+       position: absolute;
+       top: 3px;
+       left: 29px;
+       width: 5px;
+       height: 14px;
+       border-radius: 20%;
+       background: #000;
+}
+
+.mw-spinner-container > div:nth-child( 1 ) {
+       transform: rotate( 0deg );
+       animation-delay: -1.1s;
+}
+
+.mw-spinner-container > div:nth-child( 2 ) {
+       transform: rotate( 30deg );
+       animation-delay: -1s;
+}
+
+.mw-spinner-container > div:nth-child( 3 ) {
+       transform: rotate( 60deg );
+       animation-delay: -0.9s;
+}
+
+.mw-spinner-container > div:nth-child( 4 ) {
+       transform: rotate( 90deg );
+       animation-delay: -0.8s;
+}
+
+.mw-spinner-container > div:nth-child( 5 ) {
+       transform: rotate( 120deg );
+       animation-delay: -0.7s;
+}
+
+.mw-spinner-container > div:nth-child( 6 ) {
+       transform: rotate( 150deg );
+       animation-delay: -0.6s;
+}
+
+.mw-spinner-container > div:nth-child( 7 ) {
+       transform: rotate( 180deg );
+       animation-delay: -0.5s;
+}
+
+.mw-spinner-container > div:nth-child( 8 ) {
+       transform: rotate( 210deg );
+       animation-delay: -0.4s;
+}
+
+.mw-spinner-container > div:nth-child( 9 ) {
+       transform: rotate( 240deg );
+       animation-delay: -0.3s;
+}
+
+.mw-spinner-container > div:nth-child( 10 ) {
+       transform: rotate( 270deg );
+       animation-delay: -0.2s;
+}
+
+.mw-spinner-container > div:nth-child( 11 ) {
+       transform: rotate( 300deg );
+       animation-delay: -0.1s;
+}
+
+.mw-spinner-container > div:nth-child( 12 ) {
+       transform: rotate( 330deg );
+       animation-delay: 0s;
+}
+
+@keyframes mw-spinner {
+       0% {
+               opacity: 1;
+       }
+
+       100% {
+               opacity: 0;
+       }
+}