/* === Progressbar === */ .progressbar, .progressbar-infinite { width: 100%; overflow: hidden; position: relative; display: block; transform-style: preserve-3d; } body, .view, .views, .page, .panel, .popup, .framework7-root { > .progressbar, > .progressbar-infinite { position: absolute; left: 0; top: 0; z-index: 15000; border-radius: 0 !important; transform-origin: center top !important; } } .with-statusbar.device-ios, .with-statusbar.ios:not(.device-ios):not(.device-android) { body, .framework7-root { > .progressbar, > .progressbar-infinite { top: 20px; } } } .with-statusbar.device-android, .with-statusbar.md:not(.device-ios):not(.device-android) { body, .framework7-root { > .progressbar, > .progressbar-infinite { top: 24px; } } } .with-statusbar { .safe-areas({ body, .framework7-root { > .progressbar, > .progressbar-infinite { top: constant(safe-area-inset-top); top: env(safe-area-inset-top); } } }) } .progressbar { vertical-align: middle; span { width: 100%; height: 100%; position: absolute; left: 0; top: 0; transform: translate3d(-100%, 0, 0); transition-duration: 150ms; } } .progressbar-infinite { &:before, &:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: left center; transform: translate3d(0, 0, 0); display: block; } &.color-multi { background: none !important; } } .progressbar-in { animation: progressbar-in 150ms forwards; } .progressbar-out { animation: progressbar-out 150ms forwards; } @keyframes progressbar-in { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } } @keyframes progressbar-out { from { opacity: 1; transform: scaleY(1); } to { opacity: 0; transform: scaleY(0); } } & when (@includeIosTheme) { @import url('./progressbar-ios.less'); } & when (@includeMdTheme) { @import url('./progressbar-md.less'); }