Page MenuHomeWickedGov Phorge
Files F5976903

spinner.less
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

spinner.less
View Options

.mw-spinner {
position: relative;
> .mw-spinner-container {
transform-origin: 0 0;
}
@mw-spinner-small-size: 20px;
@mw-spinner-large-size: 32px;
&-small {
width: @mw-spinner-small-size;
height: @mw-spinner-small-size;
> .mw-spinner-container {
transform: scale( unit( @mw-spinner-small-size / 64 ) );
}
}
&-large {
width: @mw-spinner-large-size;
height: @mw-spinner-large-size;
> .mw-spinner-container {
transform: scale( unit( @mw-spinner-large-size / 64 ) );
}
}
&-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;
}
}
&-inline {
display: inline-block;
vertical-align: middle;
}
/**
* CSS loading spinner adapted from loadingio, CC0
* https://github.com/loadingio/css-spinner/
*/
&-container > div {
transform-origin: 32px 32px;
animation: mw-spinner 1.2s linear infinite;
&::after {
content: ' ';
display: block;
position: absolute;
top: 3px;
// If this was allowed to flip, then transform-origin would also need to be flipped,
// but that's not supported. Partial flipping causes visual issues (T292673).
/* @noflip */
left: 29px;
width: 5px;
height: 14px;
border-radius: 20%;
background: #000;
}
&:nth-child( 1 ) {
transform: rotate( 0deg );
animation-delay: -1.1s;
}
&:nth-child( 2 ) {
transform: rotate( 30deg );
animation-delay: -1s;
}
&:nth-child( 3 ) {
transform: rotate( 60deg );
animation-delay: -0.9s;
}
&:nth-child( 4 ) {
transform: rotate( 90deg );
animation-delay: -0.8s;
}
&:nth-child( 5 ) {
transform: rotate( 120deg );
animation-delay: -0.7s;
}
&:nth-child( 6 ) {
transform: rotate( 150deg );
animation-delay: -0.6s;
}
&:nth-child( 7 ) {
transform: rotate( 180deg );
animation-delay: -0.5s;
}
&:nth-child( 8 ) {
transform: rotate( 210deg );
animation-delay: -0.4s;
}
&:nth-child( 9 ) {
transform: rotate( 240deg );
animation-delay: -0.3s;
}
&:nth-child( 10 ) {
transform: rotate( 270deg );
animation-delay: -0.2s;
}
&:nth-child( 11 ) {
transform: rotate( 300deg );
animation-delay: -0.1s;
}
&:nth-child( 12 ) {
transform: rotate( 330deg );
animation-delay: 0s;
}
}
}
@keyframes mw-spinner {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

File Metadata

Mime Type
text/plain
Expires
Sat, Oct 3, 19:30 (3 d, 43 m ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
71/0b/a9989cb22fc7191d10707999efc1
Default Alt Text
spinner.less (2 KB)

Event Timeline