Page MenuHomeWickedGov Phorge
Files F4102377

progressbar.less
No OneTemporary
Actions

Size
1 KB
Referenced Files
None
Subscribers
None

progressbar.less
View Options

/**
* 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: @z-index-top;
// Ensure it doesn't extend beyond the input.
box-sizing: border-box;
display: block;
width: 100%;
height: var( --height-progress-bar );
content: '';
// Add a progress-bar to the loading indicator
background: /*image*/
linear-gradient( 90deg, var( --color-progressive ) 0%, var( --color-progressive ) 100% )
-10% 0 ~'/' 0 var( --height-progress-bar )
no-repeat,transparent;
// Align style with the form
border-radius: 0 0 var( --border-radius-large ) var( --border-radius-large );
// Fancy shadow under progress
filter: drop-shadow( 0 0 16px var( --color-progressive ) ) drop-shadow( 0 0 24px var( --color-progressive ) );
// 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;
// Standalone PWA has no loading affordance
// So we provide one
/* stylelint-disable-next-line plugin/use-baseline */
@media ( display-mode: standalone ) {
--delay-progress-bar: 0ms;
}
}

File Metadata

Mime Type
text/plain
Expires
Tue, Aug 18, 17:24 (3 w, 3 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
c1/e7/384c65d24340f39259999cd40a3f
Default Alt Text
progressbar.less (1 KB)

Event Timeline