.progress-bar-container { position: fixed; top: 0; left: 0; width: 100%; z-index: $z-index-9; .pjax-progress-bar { position: absolute; top: 0; left: 0; height: 2px; width: 0; background: var(--pjax-progress-bar-color); visibility: hidden; opacity: 0; z-index: $z-index-8; transition(); &.show { transition(); opacity: 1; visibility: visible; } } .pjax-progress-icon { position: absolute; top: 0; right: 0; z-index: $z-index-8; display: flex; align-items: center; justify-content: center; padding: 8px 8px 0 0; color: var(--default-text-color); visibility: hidden; transition(); &.show { transition: visibility 0.1s linear; visibility: visible; } i { font-size: 1.12rem; } } .scroll-progress-bar { position: absolute; top: 0; left: 0; width: 0; height: $scroll-progress-bar-height; visibility: hidden; background: var(--primary-color); transition: all 0.1s ease; z-index: $z-index-7; &.hide { transition: none; visibility: hidden; } } }