Brion VIBBER has uploaded a new change for review. https://gerrit.wikimedia.org/r/223586
Change subject: Hi-DPI spinner using CSS animation ...................................................................... Hi-DPI spinner using CSS animation Animated SVG seems pretty flaky, but animation/transforms with CSS seem to work fine. Built an equivalent to our GIF spinner with http://loading.io/ and cleaned up the generated HTML/CSS for use here. Small and large sizes supported. Doesn't appear to explode. Keeps on using the GIFs where CSS animation not supported. Bug: T61699 Change-Id: I56c7ab5deaa9d9718a7dfc074213f7a73e6a1639 --- M resources/src/jquery/jquery.spinner.css M resources/src/jquery/jquery.spinner.js 2 files changed, 126 insertions(+), 0 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core refs/changes/86/223586/1 diff --git a/resources/src/jquery/jquery.spinner.css b/resources/src/jquery/jquery.spinner.css index a9e06db..e6527fe 100644 --- a/resources/src/jquery/jquery.spinner.css +++ b/resources/src/jquery/jquery.spinner.css @@ -38,3 +38,93 @@ zoom: 1; *display: inline; } + + +/* Spinner animation CSS generated via loader.io and manually cleaned up*/ + +@-webkit-keyframes mw-spinner-anim { + 0% { + opacity: 1 + } + 100% { + opacity: 0 + } +} +@keyframes mw-spinner-anim { + 0% { + opacity: 1 + } + 100% { + opacity: 0 + } +} + +.mw-spinner-small.mw-spinner-anim { + background: none; + -webkit-transform: scale(0.1); + transform: scale(0.1); +} +.mw-spinner-large.mw-spinner-anim { + background: none; + -webkit-transform: scale(0.16); + transform: scale(0.16); +} + +.mw-spinner-anim-inner { + position: relative; + background:none; + width:200px; + height:200px; +} +.mw-spinner-anim-inner > div { + -webkit-animation: mw-spinner-anim 1s linear infinite; + animation: mw-spinner-anim 1s linear infinite; +} +.mw-spinner-anim-inner > div:nth-of-type(1){ + -webkit-animation-delay: -0.5s; + animation-delay: -0.5s; +} +.mw-spinner-anim-inner > div:nth-of-type(2){ + -webkit-animation-delay: -0.4166666666666667s; + animation-delay: -0.4166666666666667s; +} +.mw-spinner-anim-inner > div:nth-of-type(3){ + -webkit-animation-delay: -0.33333333333333337s; + animation-delay: -0.33333333333333337s; +} +.mw-spinner-anim-inner > div:nth-of-type(4){ + -webkit-animation-delay: -0.25s; + animation-delay: -0.25s; +} +.mw-spinner-anim-inner > div:nth-of-type(5){ + -webkit-animation-delay: -0.16666666666666669s; + animation-delay: -0.16666666666666669s; +} +.mw-spinner-anim-inner > div:nth-of-type(6){ + -webkit-animation-delay: -0.08333333333333331s; + animation-delay: -0.08333333333333331s; +} +.mw-spinner-anim-inner > div:nth-of-type(7){ + -webkit-animation-delay: 0s; + animation-delay: 0s; +} +.mw-spinner-anim-inner > div:nth-of-type(8){ + -webkit-animation-delay: 0.08333333333333337s; + animation-delay: 0.08333333333333337s; +} +.mw-spinner-anim-inner > div:nth-of-type(9){ + -webkit-animation-delay: 0.16666666666666663s; + animation-delay: 0.16666666666666663s; +} +.mw-spinner-anim-inner > div:nth-of-type(10){ + -webkit-animation-delay: 0.25s; + animation-delay: 0.25s; +} +.mw-spinner-anim-inner > div:nth-of-type(11){ + -webkit-animation-delay: 0.33333333333333337s; + animation-delay: 0.33333333333333337s; +} +.mw-spinner-anim-inner > div:nth-of-type(12){ + -webkit-animation-delay: 0.41666666666666663s; + animation-delay: 0.41666666666666663s; +} diff --git a/resources/src/jquery/jquery.spinner.js b/resources/src/jquery/jquery.spinner.js index 361d3e0..063c33d 100644 --- a/resources/src/jquery/jquery.spinner.js +++ b/resources/src/jquery/jquery.spinner.js @@ -30,6 +30,7 @@ * - .mw-spinner for every spinner * - .mw-spinner-small / .mw-spinner-large for size * - .mw-spinner-block / .mw-spinner-inline for display types + * - .mw-spinner-svg when we're using animated SVG * * Example: * @@ -75,6 +76,13 @@ $spinner.addClass( opts.size === 'large' ? 'mw-spinner-large' : 'mw-spinner-small' ); $spinner.addClass( opts.type === 'block' ? 'mw-spinner-block' : 'mw-spinner-inline' ); + // HiDPI-friendly CSS animation based on sample from loader.io + if (supportsAnimation()) { + $spinner + .addClass('mw-spinner-anim') + .append(createAnimation()); + } + return $spinner; }, @@ -104,6 +112,34 @@ return this.after( $.createSpinner( opts ) ); }; + function supportsAnimation() { + var $div = $('<div>'), + div = $div[0], + style = div.style; + return (typeof style.animation === 'string') + || (typeof style.webkitAnimation === 'string'); + } + + function createAnimation() { + var $anim = $('<div>').addClass('mw-spinner-anim-inner'); + for (var i = 0; i < 12; i++) { + var deg = i * 30, + transform = 'rotate(' + deg + 'deg) translate(0,-60px)'; + $('<div>') + .css('top', '80px') + .css('left', '93px') + .css('width', '14px') + .css('height', '40px') + .css('background', 'black') + .css('-webkit-transform', transform) + .css('transform', transform) + .css('border-radius', '10px') + .css('position', 'absolute') + .appendTo($anim); + } + return $anim; + } + /** * @class jQuery * @mixins jQuery.plugin.spinner -- To view, visit https://gerrit.wikimedia.org/r/223586 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I56c7ab5deaa9d9718a7dfc074213f7a73e6a1639 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/core Gerrit-Branch: master Gerrit-Owner: Brion VIBBER <br...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
