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