framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
1 lines • 4.24 kB
CSS
.ios{--f7-progressbar-height:4px;--f7-progressbar-border-radius:4px;--f7-progressbar-bg-color:rgba(0, 0, 0, 0.3)}.ios .dark,.ios.dark{--f7-progressbar-bg-color:rgba(255, 255, 255, 0.3)}.md{--f7-progressbar-height:4px;--f7-progressbar-border-radius:0px}.md,.md .dark,.md [class*=color-]{--f7-progressbar-bg-color:rgba(var(--f7-theme-color-rgb), 0.5)}.progressbar,.progressbar-infinite{width:100%;overflow:hidden;position:relative;display:block;transform-style:preserve-3d;background:var(--f7-progressbar-bg-color,rgba(var(--f7-theme-color-rgb),.5));transform-origin:center top;height:var(--f7-progressbar-height);border-radius:var(--f7-progressbar-border-radius)}.progressbar{vertical-align:middle}.progressbar span{background-color:var(--f7-progressbar-progress-color,var(--f7-theme-color));width:100%;height:100%;position:absolute;top:0;transition-duration:150ms;right:0;transform:translate3d(100%,0,0)}.progressbar-infinite{z-index:15000}.progressbar-infinite:after,.progressbar-infinite:before{content:'';position:absolute;top:0;width:100%;height:100%;transform:translate3d(0,0,0);display:block;background-color:var(--f7-progressbar-progress-color,var(--f7-theme-color));right:0;transform-origin:right center}.progressbar-infinite.color-multi{background:0 0}.progressbar-in{animation:progressbar-in 150ms forwards}.progressbar-out{animation:progressbar-out 150ms forwards}.framework7-root>.progressbar,.framework7-root>.progressbar-infinite,.page>.progressbar,.page>.progressbar-infinite,.panel>.progressbar,.panel>.progressbar-infinite,.popup>.progressbar,.popup>.progressbar-infinite,.view>.progressbar,.view>.progressbar-infinite,.views>.progressbar,.views>.progressbar-infinite,body>.progressbar,body>.progressbar-infinite{position:absolute;left:0;top:0;z-index:15000;border-radius:0;transform-origin:center top}@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)}}.ios .progressbar-infinite:before{animation:ios-progressbar-infinite 1s linear infinite}.ios .progressbar-infinite:after{display:none}.ios .progressbar-infinite.color-multi:before{width:400%;background-image:linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55,#5856d6,#34aadc,#007aff,#5ac8fa,#4cd964);background-size:25% 100%;background-repeat:repeat-x;animation:ios-progressbar-infinite-multicolor 3s linear infinite}@keyframes ios-progressbar-infinite{0%{transform:translate3d(100%,0,0)}100%{transform:translate3d(-100%,0,0)}}@keyframes ios-progressbar-infinite-multicolor{0%{transform:translate3d(0%,0,0)}100%{transform:translate3d(-50%,0,0)}}.md .progressbar-infinite:before{animation:md-progressbar-infinite-1 2s linear infinite}.md .progressbar-infinite:after{animation:md-progressbar-infinite-2 2s linear infinite}.md .progressbar-infinite.color-multi:before{background:0 0;animation:md-progressbar-infinite-multicolor-bg 3s step-end infinite}.md .progressbar-infinite.color-multi:after{background:0 0;animation:md-progressbar-infinite-multicolor-fill 3s linear infinite;transform-origin:center center}@keyframes md-progressbar-infinite-1{0%{transform:translateX(10%) scaleX(.1)}25%{transform:translateX(-30%) scaleX(.6)}50%{transform:translateX(-100%) scaleX(1)}100%{transform:translateX(-100%) scaleX(1)}}@keyframes md-progressbar-infinite-2{0%{transform:translateX(100%) scaleX(1)}40%{transform:translateX(100%) scaleX(1)}75%{transform:translateX(-60%) scaleX(.35)}90%{transform:translateX(-100%) scaleX(.1)}100%{transform:translateX(-100%) scaleX(.1)}}@keyframes md-progressbar-infinite-multicolor-bg{0%{background-color:#4caf50}25%{background-color:#f44336}50%{background-color:#2196f3}75%{background-color:#ffeb3b}}@keyframes md-progressbar-infinite-multicolor-fill{0%{transform:scaleX(0);background-color:#f44336}24.9%{transform:scaleX(1);background-color:#f44336}25%{transform:scaleX(0);background-color:#2196f3}49.9%{transform:scaleX(1);background-color:#2196f3}50%{transform:scaleX(0);background-color:#ffeb3b}74.9%{transform:scaleX(1);background-color:#ffeb3b}75%{transform:scaleX(0);background-color:#4caf50}100%{transform:scaleX(1);background-color:#4caf50}}