resources/src/jquery.spinner/spinner.less

   1 @import 'mediawiki.skin.variables.less';
   2
   3 .mw-spinner {
   4         position: relative;
   5
   6         > .mw-spinner-container {
   7                 transform-origin: 0 0;
   8         }
   9
  10         @mw-spinner-small-size: 20px;
  11         @mw-spinner-large-size: 32px;
  12
  13         &-small {
  14                 width: @mw-spinner-small-size;
  15                 height: @mw-spinner-small-size;
  16
  17                 > .mw-spinner-container {
  18                         transform: scale( unit( @mw-spinner-small-size / 64 ) );
  19                 }
  20         }
  21
  22         &-large {
  23                 width: @mw-spinner-large-size;
  24                 height: @mw-spinner-large-size;
  25
  26                 > .mw-spinner-container {
  27                         transform: scale( unit( @mw-spinner-large-size / 64 ) );
  28                 }
  29         }
  30
  31         &-block {
  32                 display: block;
  33                 width: 100%;
  34                 text-align: center;
  35
  36                 > .mw-spinner-container {
  37                         display: inline-block;
  38                         vertical-align: top;
  39                 }
  40
  41                 &.mw-spinner-small > .mw-spinner-container {
  42                         min-width: @mw-spinner-small-size;
  43                 }
  44
  45                 &.mw-spinner-large > .mw-spinner-container {
  46                         min-width: @mw-spinner-large-size;
  47                 }
  48         }
  49
  50         &-inline {
  51                 display: inline-block;
  52                 vertical-align: middle;
  53         }
  54
  55         /**
  56         * CSS loading spinner adapted from loadingio, CC0
  57         * https://github.com/loadingio/css-spinner/
  58         */
  59         &-container > div {
  60                 transform-origin: 32px 32px;
  61                 animation: mw-spinner 1.2s linear infinite;
  62
  63                 &::after {
  64                         content: ' ';
  65                         display: block;
  66                         position: absolute;
  67                         top: 3px;
  68                         // If this was allowed to flip, then transform-origin would also need to be flipped,
  69                         // but that's not supported. Partial flipping causes visual issues (T292673).
  70                         /* @noflip */
  71                         left: 29px;
  72                         width: 5px;
  73                         height: 14px;
  74                         border-radius: 20%;
  75                         background: @color-base;
  76                 }
  77
  78                 &:nth-child( 1 ) {
  79                         transform: rotate( 0deg );
  80                         animation-delay: -1.1s;
  81                 }
  82
  83                 &:nth-child( 2 ) {
  84                         transform: rotate( 30deg );
  85                         animation-delay: -1s;
  86                 }
  87
  88                 &:nth-child( 3 ) {
  89                         transform: rotate( 60deg );
  90                         animation-delay: -0.9s;
  91                 }
  92
  93                 &:nth-child( 4 ) {
  94                         transform: rotate( 90deg );
  95                         animation-delay: -0.8s;
  96                 }
  97
  98                 &:nth-child( 5 ) {
  99                         transform: rotate( 120deg );
 100                         animation-delay: -0.7s;
 101                 }
 102
 103                 &:nth-child( 6 ) {
 104                         transform: rotate( 150deg );
 105                         animation-delay: -0.6s;
 106                 }
 107
 108                 &:nth-child( 7 ) {
 109                         transform: rotate( 180deg );
 110                         animation-delay: -0.5s;
 111                 }
 112
 113                 &:nth-child( 8 ) {
 114                         transform: rotate( 210deg );
 115                         animation-delay: -0.4s;
 116                 }
 117
 118                 &:nth-child( 9 ) {
 119                         transform: rotate( 240deg );
 120                         animation-delay: -0.3s;
 121                 }
 122
 123                 &:nth-child( 10 ) {
 124                         transform: rotate( 270deg );
 125                         animation-delay: -0.2s;
 126                 }
 127
 128                 &:nth-child( 11 ) {
 129                         transform: rotate( 300deg );
 130                         animation-delay: -0.1s;
 131                 }
 132
 133                 &:nth-child( 12 ) {
 134                         transform: rotate( 330deg );
 135                         animation-delay: 0s;
 136                 }
 137         }
 138 }
 139
 140 @keyframes mw-spinner {
 141         0% {
 142                 opacity: 1;
 143         }
 144
 145         100% {
 146                 opacity: 0;
 147         }
 148 }