resources/src/jquery.spinner/spinner.less

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