framework7/lazy-components/progressbar.css

Full featured mobile HTML framework for building iOS & Android apps

.progressbar,.progressbar-infinite{width:100%;overflow:hidden;position:relative;display:block;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.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!important;-webkit-transform-origin:center top!important;transform-origin:center top!important}.with-statusbar.device-ios .framework7-root>.progressbar,.with-statusbar.device-ios .framework7-root>.progressbar-infinite,.with-statusbar.device-ios body>.progressbar,.with-statusbar.device-ios body>.progressbar-infinite,.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root>.progressbar,.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root>.progressbar-infinite,.with-statusbar.ios:not(.device-ios):not(.device-android) body>.progressbar,.with-statusbar.ios:not(.device-ios):not(.device-android) body>.progressbar-infinite{top:20px}.with-statusbar.device-android .framework7-root>.progressbar,.with-statusbar.device-android .framework7-root>.progressbar-infinite,.with-statusbar.device-android body>.progressbar,.with-statusbar.device-android body>.progressbar-infinite,.with-statusbar.md:not(.device-ios):not(.device-android) .framework7-root>.progressbar,.with-statusbar.md:not(.device-ios):not(.device-android) .framework7-root>.progressbar-infinite,.with-statusbar.md:not(.device-ios):not(.device-android) body>.progressbar,.with-statusbar.md:not(.device-ios):not(.device-android) body>.progressbar-infinite{top:24px}.with-statusbar.device-iphone-x .framework7-root>.progressbar,.with-statusbar.device-iphone-x .framework7-root>.progressbar-infinite,.with-statusbar.device-iphone-x body>.progressbar,.with-statusbar.device-iphone-x body>.progressbar-infinite{top:constant(safe-area-inset-top);top:env(safe-area-inset-top)}.progressbar{vertical-align:middle}.progressbar span{width:100%;height:100%;position:absolute;left:0;top:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);-webkit-transition-duration:150ms;transition-duration:150ms}.progressbar-infinite:after,.progressbar-infinite:before{position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform-origin:left center;transform-origin:left center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);display:block}.progressbar-infinite.color-multi{background:0 0!important}.progressbar-in{-webkit-animation:progressbar-in 150ms forwards;animation:progressbar-in 150ms forwards}.progressbar-out{-webkit-animation:progressbar-out 150ms forwards;animation:progressbar-out 150ms forwards}@-webkit-keyframes progressbar-in{from{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}to{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}}@keyframes progressbar-in{from{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}to{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}}@-webkit-keyframes progressbar-out{from{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}to{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}}@keyframes progressbar-out{from{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}to{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}}.ios .progressbar,.ios .progressbar-infinite{height:2px;background:#b6b6b6;-webkit-transform-origin:center top;transform-origin:center top;border-radius:2px}.ios .progressbar span{background:#007aff}.ios .progressbar-infinite:before{content:'';background:#007aff;-webkit-animation:ios-progressbar-infinite 1s linear infinite;animation:ios-progressbar-infinite 1s linear infinite}.ios .progressbar-infinite.color-multi:before{width:400%;background-image:-webkit-gradient(linear,left top,right top,from(#4cd964),color-stop(#5ac8fa),color-stop(#007aff),color-stop(#34aadc),color-stop(#5856d6),color-stop(#ff2d55),color-stop(#5856d6),color-stop(#34aadc),color-stop(#007aff),color-stop(#5ac8fa),to(#4cd964));background-image:-webkit-linear-gradient(left,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55,#5856d6,#34aadc,#007aff,#5ac8fa,#4cd964);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;-webkit-animation:ios-progressbar-infinite-multicolor 3s linear infinite;animation:ios-progressbar-infinite-multicolor 3s linear infinite}.ios .color-theme-red .progressbar span{background:#ff3b30}.ios .color-theme-red .progressbar-infinite:before{background:#ff3b30}.ios .color-theme-green .progressbar span{background:#4cd964}.ios .color-theme-green .progressbar-infinite:before{background:#4cd964}.ios .color-theme-blue .progressbar span{background:#007aff}.ios .color-theme-blue .progressbar-infinite:before{background:#007aff}.ios .color-theme-pink .progressbar span{background:#ff2d55}.ios .color-theme-pink .progressbar-infinite:before{background:#ff2d55}.ios .color-theme-yellow .progressbar span{background:#fc0}.ios .color-theme-yellow .progressbar-infinite:before{background:#fc0}.ios .color-theme-orange .progressbar span{background:#ff9500}.ios .color-theme-orange .progressbar-infinite:before{background:#ff9500}.ios .color-theme-gray .progressbar span{background:#8e8e93}.ios .color-theme-gray .progressbar-infinite:before{background:#8e8e93}.ios .color-theme-white .progressbar span{background:#fff}.ios .color-theme-white .progressbar-infinite:before{background:#fff}.ios .color-theme-black .progressbar span{background:#000}.ios .color-theme-black .progressbar-infinite:before{background:#000}.ios .progressbar.color-red span{background:#ff3b30}.ios .progressbar-infinite.color-red:before{background:#ff3b30}.ios .progressbar.color-green span{background:#4cd964}.ios .progressbar-infinite.color-green:before{background:#4cd964}.ios .progressbar.color-blue span{background:#007aff}.ios .progressbar-infinite.color-blue:before{background:#007aff}.ios .progressbar.color-pink span{background:#ff2d55}.ios .progressbar-infinite.color-pink:before{background:#ff2d55}.ios .progressbar.color-yellow span{background:#fc0}.ios .progressbar-infinite.color-yellow:before{background:#fc0}.ios .progressbar.color-orange span{background:#ff9500}.ios .progressbar-infinite.color-orange:before{background:#ff9500}.ios .progressbar.color-gray span{background:#8e8e93}.ios .progressbar-infinite.color-gray:before{background:#8e8e93}.ios .progressbar.color-white span{background:#fff}.ios .progressbar-infinite.color-white:before{background:#fff}.ios .progressbar.color-black span{background:#000}.ios .progressbar-infinite.color-black:before{background:#000}@-webkit-keyframes ios-progressbar-infinite{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes ios-progressbar-infinite{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@-webkit-keyframes ios-progressbar-infinite-multicolor{0%{-webkit-transform:translate3d(0%,0,0);transform:translate3d(0%,0,0)}100%{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@keyframes ios-progressbar-infinite-multicolor{0%{-webkit-transform:translate3d(0%,0,0);transform:translate3d(0%,0,0)}100%{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}.md .progressbar,.md .progressbar-infinite{height:4px;background:rgba(33,150,243,.5);-webkit-transform-origin:center bottom;transform-origin:center bottom}.md .progressbar span{background:#2196f3}.md .progressbar-infinite{z-index:15000}.md .progressbar-infinite:after,.md .progressbar-infinite:before{content:'';background:#2196f3}.md .progressbar-infinite:before{-webkit-animation:md-progressbar-infinite-1 2s linear infinite;animation:md-progressbar-infinite-1 2s linear infinite}.md .progressbar-infinite:after{-webkit-animation:md-progressbar-infinite-2 2s linear infinite;animation:md-progressbar-infinite-2 2s linear infinite}.md .progressbar-infinite.color-multi:before{background:0 0;-webkit-animation:md-progressbar-infinite-multicolor-bg 3s step-end infinite;animation:md-progressbar-infinite-multicolor-bg 3s step-end infinite}.md .progressbar-infinite.color-multi:after{background:0 0;-webkit-animation:md-progressbar-infinite-multicolor-fill 3s linear infinite;animation:md-progressbar-infinite-multicolor-fill 3s linear infinite;-webkit-transform-origin:center center;transform-origin:center center}.md .color-theme-red .progressbar,.md .color-theme-red .progressbar-infinite{background:rgba(244,67,54,.5)}.md .color-theme-red .progressbar span{background:#f44336}.md .color-theme-red .progressbar-infinite:after,.md .color-theme-red .progressbar-infinite:before{background:#f44336}.md .color-theme-green .progressbar,.md .color-theme-green .progressbar-infinite{background:rgba(76,175,80,.5)}.md .color-theme-green .progressbar span{background:#4caf50}.md .color-theme-green .progressbar-infinite:after,.md .color-theme-green .progressbar-infinite:before{background:#4caf50}.md .color-theme-blue .progressbar,.md .color-theme-blue .progressbar-infinite{background:rgba(33,150,243,.5)}.md .color-theme-blue .progressbar span{background:#2196f3}.md .color-theme-blue .progressbar-infinite:after,.md .color-theme-blue .progressbar-infinite:before{background:#2196f3}.md .color-theme-pink .progressbar,.md .color-theme-pink .progressbar-infinite{background:rgba(233,30,99,.5)}.md .color-theme-pink .progressbar span{background:#e91e63}.md .color-theme-pink .progressbar-infinite:after,.md .color-theme-pink .progressbar-infinite:before{background:#e91e63}.md .color-theme-yellow .progressbar,.md .color-theme-yellow .progressbar-infinite{background:rgba(255,235,59,.5)}.md .color-theme-yellow .progressbar span{background:#ffeb3b}.md .color-theme-yellow .progressbar-infinite:after,.md .color-theme-yellow .progressbar-infinite:before{background:#ffeb3b}.md .color-theme-orange .progressbar,.md .color-theme-orange .progressbar-infinite{background:rgba(255,152,0,.5)}.md .color-theme-orange .progressbar span{background:#ff9800}.md .color-theme-orange .progressbar-infinite:after,.md .color-theme-orange .progressbar-infinite:before{background:#ff9800}.md .color-theme-gray .progressbar,.md .color-theme-gray .progressbar-infinite{background:rgba(158,158,158,.5)}.md .color-theme-gray .progressbar span{background:#9e9e9e}.md .color-theme-gray .progressbar-infinite:after,.md .color-theme-gray .progressbar-infinite:before{background:#9e9e9e}.md .color-theme-white .progressbar,.md .color-theme-white .progressbar-infinite{background:rgba(255,255,255,.5)}.md .color-theme-white .progressbar span{background:#fff}.md .color-theme-white .progressbar-infinite:after,.md .color-theme-white .progressbar-infinite:before{background:#fff}.md .color-theme-black .progressbar,.md .color-theme-black .progressbar-infinite{background:rgba(0,0,0,.5)}.md .color-theme-black .progressbar span{background:#000}.md .color-theme-black .progressbar-infinite:after,.md .color-theme-black .progressbar-infinite:before{background:#000}.md .progressbar-infinite.color-red,.md .progressbar.color-red{background:rgba(244,67,54,.5)}.md .progressbar.color-red span{background:#f44336}.md .progressbar-infinite.color-red:after,.md .progressbar-infinite.color-red:before{background:#f44336}.md .progressbar-infinite.color-green,.md .progressbar.color-green{background:rgba(76,175,80,.5)}.md .progressbar.color-green span{background:#4caf50}.md .progressbar-infinite.color-green:after,.md .progressbar-infinite.color-green:before{background:#4caf50}.md .progressbar-infinite.color-blue,.md .progressbar.color-blue{background:rgba(33,150,243,.5)}.md .progressbar.color-blue span{background:#2196f3}.md .progressbar-infinite.color-blue:after,.md .progressbar-infinite.color-blue:before{background:#2196f3}.md .progressbar-infinite.color-pink,.md .progressbar.color-pink{background:rgba(233,30,99,.5)}.md .progressbar.color-pink span{background:#e91e63}.md .progressbar-infinite.color-pink:after,.md .progressbar-infinite.color-pink:before{background:#e91e63}.md .progressbar-infinite.color-yellow,.md .progressbar.color-yellow{background:rgba(255,235,59,.5)}.md .progressbar.color-yellow span{background:#ffeb3b}.md .progressbar-infinite.color-yellow:after,.md .progressbar-infinite.color-yellow:before{background:#ffeb3b}.md .progressbar-infinite.color-orange,.md .progressbar.color-orange{background:rgba(255,152,0,.5)}.md .progressbar.color-orange span{background:#ff9800}.md .progressbar-infinite.color-orange:after,.md .progressbar-infinite.color-orange:before{background:#ff9800}.md .progressbar-infinite.color-gray,.md .progressbar.color-gray{background:rgba(158,158,158,.5)}.md .progressbar.color-gray span{background:#9e9e9e}.md .progressbar-infinite.color-gray:after,.md .progressbar-infinite.color-gray:before{background:#9e9e9e}.md .progressbar-infinite.color-white,.md .progressbar.color-white{background:rgba(255,255,255,.5)}.md .progressbar.color-white span{background:#fff}.md .progressbar-infinite.color-white:after,.md .progressbar-infinite.color-white:before{background:#fff}.md .progressbar-infinite.color-black,.md .progressbar.color-black{background:rgba(0,0,0,.5)}.md .progressbar.color-black span{background:#000}.md .progressbar-infinite.color-black:after,.md .progressbar-infinite.color-black:before{background:#000}@-webkit-keyframes md-progressbar-infinite-1{0%{-webkit-transform:translateX(-10%) scaleX(.1);transform:translateX(-10%) scaleX(.1)}25%{-webkit-transform:translateX(30%) scaleX(.6);transform:translateX(30%) scaleX(.6)}50%{-webkit-transform:translateX(100%) scaleX(1);transform:translateX(100%) scaleX(1)}100%{-webkit-transform:translateX(100%) scaleX(1);transform:translateX(100%) scaleX(1)}}@keyframes md-progressbar-infinite-1{0%{-webkit-transform:translateX(-10%) scaleX(.1);transform:translateX(-10%) scaleX(.1)}25%{-webkit-transform:translateX(30%) scaleX(.6);transform:translateX(30%) scaleX(.6)}50%{-webkit-transform:translateX(100%) scaleX(1);transform:translateX(100%) scaleX(1)}100%{-webkit-transform:translateX(100%) scaleX(1);transform:translateX(100%) scaleX(1)}}@-webkit-keyframes md-progressbar-infinite-2{0%{-webkit-transform:translateX(-100%) scaleX(1);transform:translateX(-100%) scaleX(1)}40%{-webkit-transform:translateX(-100%) scaleX(1);transform:translateX(-100%) scaleX(1)}75%{-webkit-transform:translateX(60%) scaleX(.35);transform:translateX(60%) scaleX(.35)}90%{-webkit-transform:translateX(100%) scaleX(.1);transform:translateX(100%) scaleX(.1)}100%{-webkit-transform:translateX(100%) scaleX(.1);transform:translateX(100%) scaleX(.1)}}@keyframes md-progressbar-infinite-2{0%{-webkit-transform:translateX(-100%) scaleX(1);transform:translateX(-100%) scaleX(1)}40%{-webkit-transform:translateX(-100%) scaleX(1);transform:translateX(-100%) scaleX(1)}75%{-webkit-transform:translateX(60%) scaleX(.35);transform:translateX(60%) scaleX(.35)}90%{-webkit-transform:translateX(100%) scaleX(.1);transform:translateX(100%) scaleX(.1)}100%{-webkit-transform:translateX(100%) scaleX(.1);transform:translateX(100%) scaleX(.1)}}@-webkit-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-bg{0%{background-color:#4caf50}25%{background-color:#f44336}50%{background-color:#2196f3}75%{background-color:#ffeb3b}}@-webkit-keyframes md-progressbar-infinite-multicolor-fill{0%{-webkit-transform:scaleX(0);transform:scaleX(0);background-color:#f44336}24.9%{-webkit-transform:scaleX(1);transform:scaleX(1);background-color:#f44336}25%{-webkit-transform:scaleX(0);transform:scaleX(0);background-color:#2196f3}49.9%{-webkit-transform:scaleX(1);transform:scaleX(1);background-color:#2196f3}50%{-webkit-transform:scaleX(0);transform:scaleX(0);background-color:#ffeb3b}74.9%{-webkit-transform:scaleX(1);transform:scaleX(1);background-color:#ffeb3b}75%{-webkit-transform:scaleX(0);transform:scaleX(0);background-color:#4caf50}100%{-webkit-transform:scaleX(1);transform:scaleX(1);background-color:#4caf50}}@keyframes md-progressbar-infinite-multicolor-fill{0%{-webkit-transform:scaleX(0);transform:scaleX(0);background-color:#f44336}24.9%{-webkit-transform:scaleX(1);transform:scaleX(1);background-color:#f44336}25%{-webkit-transform:scaleX(0);transform:scaleX(0);background-color:#2196f3}49.9%{-webkit-transform:scaleX(1);transform:scaleX(1);background-color:#2196f3}50%{-webkit-transform:scaleX(0);transform:scaleX(0);background-color:#ffeb3b}74.9%{-webkit-transform:scaleX(1);transform:scaleX(1);background-color:#ffeb3b}75%{-webkit-transform:scaleX(0);transform:scaleX(0);background-color:#4caf50}100%{-webkit-transform:scaleX(1);transform:scaleX(1);background-color:#4caf50}}