From 425c38ec5132655c25caba4f61208a9518951636 Mon Sep 17 00:00:00 2001 From: Ed Sanders Date: Mon, 25 Mar 2019 14:28:55 +0000 Subject: [PATCH] Replace spinner.gif with CSS solution Bug: T219163 Change-Id: Icca5c4e01fe4c0ae377245ae7afb456a17626208 --- resources/Resources.php | 2 +- .../jquery.spinner/images/spinner-large.gif | Bin 1788 -> 0 bytes .../src/jquery.spinner/images/spinner.gif | Bin 1819 -> 0 bytes resources/src/jquery.spinner/spinner.css | 36 ----- resources/src/jquery.spinner/spinner.js | 12 +- resources/src/jquery.spinner/spinner.less | 143 ++++++++++++++++++ 6 files changed, 153 insertions(+), 40 deletions(-) delete mode 100644 resources/src/jquery.spinner/images/spinner-large.gif delete mode 100644 resources/src/jquery.spinner/images/spinner.gif delete mode 100644 resources/src/jquery.spinner/spinner.css create mode 100644 resources/src/jquery.spinner/spinner.less diff --git a/resources/Resources.php b/resources/Resources.php index 5e5f3087f3..8da38a8d91 100644 --- 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 index 72203fdd7f7b00902737fc984e38aa90e468ffd6..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1788 zcmZXUc~p~E8izlVkF1|2gn$V`NEBm;F+{eq7=$1@2tt}76KWEK1O!EbvWOD$1;~Q3 z%0WaXP_e<#7Su8*VhLNtYBz0%sXdCyD2Hfq>M%-ehxt7AoN_w%ulvWn_j%s)d*2%! z8x`S{+S=Lz0sKa0FVG4vPT|e0s#2r`BZFKe1m_S2;cd#Tvsl4#*>kf5Z3aB+;H+WjylT-YeUOQh{meFz@qfIi#Z z{@0N1^QU7h#x85`nTzhNf`LzqHa5hl4W`1~+hQvCl};0ezqR16H7Y)HN_SO!o)oDJ z23sqlcW3ZNgg=DePukV4u6|6Kmnz0o{Gg{owQ{kdBeV8J)Tsb6R>L`VDs!DVQnUw))$DI}t>;CF)b?oI|`XIIH2n&ek1$i#XEt z_Bc#SeAo0+;b7-kz*nfM1NX5`dj{Yh`TEN$*=WoM^-NBgQ+C4bbpANRkbgWFh1E8U z0LnX{T3s4@ zpOWjr%ETvOJ@)S@_}aJ{*Ia#zXwwm@7~8Pp8?I16X-jDwj5U)^X7@9b!Nk?J88`J> z#fLu^yzlwp>BIToYU2sgkn;N5ua{jRElk{g4Aw&$k^!n(fk)~GC;$z?XOW%%eSWyL zS?fIU-Q?~Gf#yLr>#@Nov6@N0a<*hxlU@&VwK-HDno1i!S}1VUbBr%6)&$bU^NT&t z%04?;Rg&=C@vltWGC5N-4DTr(kqus1`~_w7o26&H>p(0mPA`J?{~wuwkTrrHgq-GB z<#25W&Sm1gs`1Ek>|DpQe>c{JwLE?lT71knfU?KHfX8GYG5ap%J0{oet2!_!UApq(f;)LI9ZeW>_`^ zTKB%bX?|GB95}8rQn*|Qo=z_~ep8%sCt|Bp^vWCDE9ht_SU{_}_Nk^Sq~RXw8rzPk5Ja?rns2&(r}N~KyA!KS*gVX!=#y9hV`;;w{$ oNWE$!oMtny&87zW%R=j~^R9H)gy% z`T8TD?Q3F)Z)Ajzcc?Gdk&Olc0I+=t!2|#V987-`f(ihbd@)Tu6RKr>WlaYZ>SlGV zM3HsV`GN-ly1w&QE6WUNoX^?^^(5vpsY~MH)f%Q$95YwKX_4l1)TSyEmAW+Mj~=rl ze>slreo)c6XR0e9+BbR&S zhX6SZ1l$6w%*IEV0RF`OLmEklO4Vzpf6!5PM|^A=e4??gaLSX0=lRtjWU*8RM$prd z0!?Xz%Bi#zY%ff2R~FbwnhLV34Ezsr3KuvdTGmUCq$Y)2rw$p#_6Ja(Uv=*3lwLBp zSRa#B(`xL5E;f0x7>I;A4gQgTJsbi->Hgpd+_Oj9oL@926F#3%5?c~er!28DpCjLHqe5s5LKY$p2!x_T5IqR|40Oc-=v>!i6p&b(+@dP* zq~qXRd7a${ImM<(Z#gMjH-0{kHCs2+XXSQudPALIS;Ek*dkX7Gv7pPqIhoED#G~XQzS1Pq3Y!{H z7{OLOh|9_VF=)Y}g|akLIgRn2MX+EYZu(D4w)xy|%ENcNHV%cdR>cmK=>k|nO|QaB zK=sQCqN7a+kOHG|A_{<_fC>t>LQse3>!C(>l$O#>hlwf#x66IeW3$v#ag+I;r)t47 z|9?Cp$NOGa!J(cSfOhpj4}u2Ra}Fd1i4f!fXCfFh0bNOgi6R?xW+Os`MNnl^hnYqI zVUTt@DUFMld>B;n(ID&PfY|HG@-?!v0`8G@x0@(+YeLrvD3EO0-kyhtFg8SdthYZw zieMoE4Ew~`K~i<72vcg)suf`BJ8Z~V?j+*dTJNk=xCAqpP1u~X{@UZ+Kld0r`^OIo z=Sh&k_UX({Dh@p5m7BjQEOg{TLC|bCMzU&l=oL1Jdok`$^;GYfgolas7IN=f-wfP< zp?q^9gCEEt<|9Nx6~9On>F(}Ih~#ku94F^H diff --git a/resources/src/jquery.spinner/spinner.css b/resources/src/jquery.spinner/spinner.css deleted file mode 100644 index 9c819a65cb..0000000000 --- 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 5dfbab7094..8cccedb4f5 100644 --- 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 = $( '
' ).addClass( 'mw-spinner-container' ).appendTo( $spinner ); + for ( i = 0; i < 12; i++ ) { + $container.append( $( '
' ) ); + } return $spinner; }, diff --git a/resources/src/jquery.spinner/spinner.less b/resources/src/jquery.spinner/spinner.less new file mode 100644 index 0000000000..596858e559 --- /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; + } +} -- 2.20.1