+++ /dev/null
-.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;
-}
* @return {jQuery}
*/
createSpinner: function ( opts ) {
- var $spinner;
+ var i, $spinner, $container;
if ( typeof opts === 'string' ) {
opts = {
$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;
},
--- /dev/null
+.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;
+ }
+}