mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-25 06:47:16 +00:00
85 lines
2 KiB
Plaintext
85 lines
2 KiB
Plaintext
/**
|
|
* Loading indicator
|
|
* Based on Vector
|
|
*
|
|
* By adding a class on the parent search form
|
|
* <div class=".citizen-loading"></div>
|
|
* A pseudo element is added via ':after' that adds the loading indicator.
|
|
*
|
|
* After appearing for more than a second, a progress-bar animation appears
|
|
* above the loading indicator.
|
|
*
|
|
**/
|
|
.citizen-loading::after {
|
|
// Delay animation by 500ms after loading
|
|
--delay-progress-bar: 500ms;
|
|
--height-progress-bar: 2px;
|
|
z-index: 999;
|
|
// Ensure it doesn't extend beyond the input.
|
|
box-sizing: border-box;
|
|
display: block;
|
|
width: 100%;
|
|
// Hide text in case it extends beyond the input.
|
|
height: var( --height-progress-bar );
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
// Placeholder text
|
|
content: 'loading';
|
|
// Add a progress-bar to the loading indicator
|
|
background: /*image*/
|
|
linear-gradient( 90deg, var( --color-primary ) 0%, var( --color-primary ) 100% )
|
|
-10% 0 ~'/' 0 var( --height-progress-bar )
|
|
no-repeat,transparent;
|
|
// Fancy shadow under progress
|
|
filter: drop-shadow( 0 0 16px var( --color-primary ) );
|
|
// Align style with the form
|
|
border-radius: 0 0 var( --border-radius--large ) var( --border-radius--large );
|
|
// Animates the progress-bar.
|
|
animation:
|
|
progress-bar
|
|
1200ms
|
|
linear
|
|
var( --delay-progress-bar )
|
|
infinite
|
|
alternate;
|
|
}
|
|
|
|
@keyframes progress-bar {
|
|
0% {
|
|
background-position: -10% 0;
|
|
background-size: 0 var( --height-progress-bar );
|
|
}
|
|
|
|
30% {
|
|
background-position: -10% 0;
|
|
background-size: 30% var( --height-progress-bar );
|
|
}
|
|
|
|
70% {
|
|
/* @noflip */
|
|
background-position: 110% 0;
|
|
background-size: 30% var( --height-progress-bar );
|
|
}
|
|
|
|
100% {
|
|
/* @noflip */
|
|
background-position: 110% 0;
|
|
background-size: 0 var( --height-progress-bar );
|
|
}
|
|
}
|
|
|
|
// On page unload
|
|
html.citizen-loading::after {
|
|
position: fixed;
|
|
top: 0;
|
|
}
|
|
|
|
@media ( display-mode: standalone ) {
|
|
// Standalone PWA has no loading affordance
|
|
// So we provide one
|
|
html.citizen-loading::after {
|
|
--delay-progress-bar: 0ms;
|
|
}
|
|
}
|