4 > .mw-spinner-container {
9 @mw-spinner-small-size: 20px;
10 @mw-spinner-large-size: 32px;
13 width: @mw-spinner-small-size;
14 height: @mw-spinner-small-size;
16 > .mw-spinner-container {
17 transform: scale( unit( @mw-spinner-small-size / 64 ) );
22 width: @mw-spinner-large-size;
23 height: @mw-spinner-large-size;
25 > .mw-spinner-container {
26 transform: scale( unit( @mw-spinner-large-size / 64 ) );
35 > .mw-spinner-container {
36 display: inline-block;
40 &.mw-spinner-small > .mw-spinner-container {
41 min-width: @mw-spinner-small-size;
44 &.mw-spinner-large > .mw-spinner-container {
45 min-width: @mw-spinner-large-size;
50 display: inline-block;
51 vertical-align: middle;
55 * CSS loading spinner adapted from loadingio, CC0
56 * https://github.com/loadingio/css-spinner/
58 .mw-spinner-container > div {
59 transform-origin: 32px 32px;
60 animation: mw-spinner 1.2s linear infinite;
63 .mw-spinner-container > div:after {
75 .mw-spinner-container > div:nth-child( 1 ) {
76 transform: rotate( 0deg );
77 animation-delay: -1.1s;
80 .mw-spinner-container > div:nth-child( 2 ) {
81 transform: rotate( 30deg );
85 .mw-spinner-container > div:nth-child( 3 ) {
86 transform: rotate( 60deg );
87 animation-delay: -0.9s;
90 .mw-spinner-container > div:nth-child( 4 ) {
91 transform: rotate( 90deg );
92 animation-delay: -0.8s;
95 .mw-spinner-container > div:nth-child( 5 ) {
96 transform: rotate( 120deg );
97 animation-delay: -0.7s;
100 .mw-spinner-container > div:nth-child( 6 ) {
101 transform: rotate( 150deg );
102 animation-delay: -0.6s;
105 .mw-spinner-container > div:nth-child( 7 ) {
106 transform: rotate( 180deg );
107 animation-delay: -0.5s;
110 .mw-spinner-container > div:nth-child( 8 ) {
111 transform: rotate( 210deg );
112 animation-delay: -0.4s;
115 .mw-spinner-container > div:nth-child( 9 ) {
116 transform: rotate( 240deg );
117 animation-delay: -0.3s;
120 .mw-spinner-container > div:nth-child( 10 ) {
121 transform: rotate( 270deg );
122 animation-delay: -0.2s;
125 .mw-spinner-container > div:nth-child( 11 ) {
126 transform: rotate( 300deg );
127 animation-delay: -0.1s;
130 .mw-spinner-container > div:nth-child( 12 ) {
131 transform: rotate( 330deg );
135 @keyframes mw-spinner {