37 lines
1 KiB
CSS
37 lines
1 KiB
CSS
|
.msz-loading {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
flex-direction: column;
|
||
|
|
min-width: var(--msz-loading-container-width, calc(var(--msz-loading-size, 1) * 100px));
|
||
|
|
min-height: var(--msz-loading-container-height, calc(var(--msz-loading-size, 1) * 100px));
|
||
|
|
}
|
||
|
|
.msz-loading-inline {
|
||
|
|
display: inline-flex;
|
||
|
|
min-width: 0;
|
||
|
|
min-height: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.msz-loading-frame {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
flex: 0 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.msz-loading-icon {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(3, 1fr);
|
||
|
|
grid-template-rows: repeat(3, 1fr);
|
||
|
|
gap: var(--msz-loading-gap, calc(var(--msz-loading-size, 1) * 1px));
|
||
|
|
margin: var(--msz-loading-margin, calc(var(--msz-loading-size, 1) * 10px));
|
||
|
|
}
|
||
|
|
|
||
|
|
.msz-loading-icon-block {
|
||
|
|
background: var(--msz-loading-colour, currentColor);
|
||
|
|
width: var(--msz-loading-width, calc(var(--msz-loading-size, 1) * 10px));
|
||
|
|
height: var(--msz-loading-height, calc(var(--msz-loading-size, 1) * 10px));
|
||
|
|
}
|
||
|
|
|
||
|
|
.msz-loading-icon-block-hidden {
|
||
|
|
opacity: 0;
|
||
|
|
}
|