Address Bar info on Progress Bar
-
Hello there
Is it possible to merge the progress bar & status bar loading info?
-
Not exactly what u want, but this is what I'm using. It overlay the progress bar on top of the statusbar, you can change the color to semi-transparent with
rgba(r,g,b,.5)
:/* optional: pageload gauge indicator */ @keyframes loading { 50% {transform:scaleX(-1);}} .addressfield .pageload.progressing .pageload-indicator:after { content: ""; position:absolute; z-index:99; top:0; left:0; width:100vw; height:4px; -webkit-background-size: 100vw; background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4) 8px, transparent 8px, transparent calc(10vw - 8px), rgba(0, 0, 0, 0.2) calc(10vw - 8px), rgba(0, 0, 0, 0.2) 10vw, rgba(255, 255, 255, 0.2) 10vw, rgba(255, 255, 255, 0.2) calc(10vw + 8px), transparent calc(10vw + 8px), transparent calc(20vw - 8px), rgba(0, 0, 0, 0.4) calc(20vw - 8px), rgba(0, 0, 0, 0.4) 20vw); animation: loading 1s steps(1) infinite !important;} /* move progress bar to bottom */ .addressfield .pageload:not(.unstarted).progressing .pageload-indicator {position:fixed; z-index:99; top:99.55vh; left:0; height:4px; width:100vw; border-radius:0; background:transparent; opacity:1 !important;} /* custom background color n redraw speed */ .addressfield .pageload:not(.unstarted).progressing .pageload-indicator::-webkit-progress-value {background: transparent; transition: .4s steps(8) 0s !important;} /* color changes base on loading % */ .addressfield .pageload:not(.unstarted).progressing .pageload-indicator[value^='0']::-webkit-progress-value {background: maroon !important;} .addressfield .pageload:not(.unstarted).progressing .pageload-indicator[value^='1']:not([value='1']):not([value='100'])::-webkit-progress-value {background: firebrick !important;} .addressfield .pageload:not(.unstarted).progressing .pageload-indicator[value^='2']:not([value='2'])::-webkit-progress-value {background:orangered !important;} .addressfield .pageload:not(.unstarted).progressing .pageload-indicator[value^='3']:not([value='3'])::-webkit-progress-value {background:darkorange !important;} .addressfield .pageload:not(.unstarted).progressing .pageload-indicator[value^='4']:not([value='4'])::-webkit-progress-value {background:orange !important;} .addressfield .pageload:not(.unstarted).progressing .pageload-indicator[value^='5']:not([value='5'])::-webkit-progress-value {background:gold !important;} .addressfield .pageload:not(.unstarted).progressing .pageload-indicator[value^='6']:not([value='6'])::-webkit-progress-value {background:greenyellow !important;} .addressfield .pageload:not(.unstarted).progressing .pageload-indicator[value^='7']:not([value='7'])::-webkit-progress-value {background:limegreen !important;} .addressfield .pageload:not(.unstarted).progressing .pageload-indicator[value^='8']:not([value='8'])::-webkit-progress-value {background:dodgerblue !important;} .addressfield .pageload:not(.unstarted).progressing .pageload-indicator[value^='9']:not([value='9'])::-webkit-progress-value {background:blue !important;} .addressfield .pageload:not(.unstarted).progressing .pageload-indicator[value='100']::-webkit-progress-value {background:RGBA(255, 0, 255,.3) !important;}
Just customize it to whatever you like.
Hope this help! -
Thank you, @dude99
-
@dude99 It works as you said.
Cheers -