framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
1 lines • 4.27 kB
CSS
:root{--f7-preloader-modal-padding:8px;--f7-preloader-modal-bg-color:#000c}.ios{--f7-preloader-color:#6c6c6c;--f7-preloader-size:20px;--f7-preloader-modal-preloader-size:34px;--f7-preloader-modal-border-radius:5px}.md{--f7-preloader-color:#757575;--f7-preloader-size:32px;--f7-preloader-modal-preloader-size:32px;--f7-preloader-modal-border-radius:4px}.preloader{display:inline-block;font-size:0;height:var(--f7-preloader-size);position:relative;vertical-align:middle;width:var(--f7-preloader-size)}.preloader .preloader-inner{display:block;height:100%;position:relative;width:100%}.preloader-backdrop{background:none;opacity:0;visibility:visible;z-index:14000}.preloader-modal{background:var(--f7-preloader-modal-bg-color);border-radius:var(--f7-preloader-modal-border-radius);left:50%;padding:var(--f7-preloader-modal-padding);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);z-index:14500}.preloader-modal .preloader{--f7-preloader-size:var(--f7-preloader-modal-preloader-size);display:block}.with-modal-preloader .page-content,.with-modal-preloader.page-content,html.with-modal-preloader .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}.preloader[class*=color-]{--f7-preloader-color:var(--f7-theme-color)}.preloader.color-white{--f7-preloader-color:#fff}.preloader.color-black{--f7-preloader-color:#000}.ios .preloader{color:var(--f7-preloader-color)}.ios .preloader-inner{animation:ios-preloader-spin 1s steps(8) infinite}.ios .preloader-inner-line{background:currentColor;border-radius:100px;display:block;height:33.33%;left:50%;position:absolute;top:50%;transform-origin:center 150%;width:11.6%}.ios .preloader-multi-color .preloader-inner-line,.ios .preloader.color-multi .preloader-inner-line{animation:ios-preloader-multicolor 3s linear infinite}.ios .preloader-inner-line:first-child{opacity:.27;transform:translate(-50%,-150%) rotate(0deg)}.ios .preloader-inner-line:nth-child(2){opacity:.35285714;transform:translate(-50%,-150%) rotate(45deg)}.ios .preloader-inner-line:nth-child(3){opacity:.43571429;transform:translate(-50%,-150%) rotate(90deg)}.ios .preloader-inner-line:nth-child(4){opacity:.51857143;transform:translate(-50%,-150%) rotate(135deg)}.ios .preloader-inner-line:nth-child(5){opacity:.60142857;transform:translate(-50%,-150%) rotate(180deg)}.ios .preloader-inner-line:nth-child(6){opacity:.68428571;transform:translate(-50%,-150%) rotate(225deg)}.ios .preloader-inner-line:nth-child(7){opacity:.76714286;transform:translate(-50%,-150%) rotate(270deg)}.ios .preloader-inner-line:nth-child(8){opacity:.85;transform:translate(-50%,-150%) rotate(315deg)}@keyframes ios-preloader-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes ios-preloader-multicolor{0%,to{background-color:#2196f3}25%{background-color:#ff3b30}50%{background-color:#4cd964}75%{background-color:#ff9500}}.md .preloader{color:var(--f7-preloader-color)}.md .preloader-inner{animation:md-preloader-rotate 1.4s linear infinite}.md .preloader-inner circle{animation:md-preloader-circle-rotate 5.6s ease-in-out infinite;fill:none;stroke:currentColor;stroke-dasharray:100px;stroke-dashoffset:80px;stroke-width:4;transform:rotate(-90deg);transform-origin:18px 18px}.md .preloader-multi-color circle,.md .preloader.color-multi circle{animation:md-preloader-circle-rotate 5.6s ease-in-out infinite,md-preloader-multicolor 5.6s ease-in-out infinite}@keyframes md-preloader-multicolor{0%,to{stroke:#4285f4}75%{stroke:#1b9a59}50%{stroke:#f7c223}25%{stroke:#de3e35}}@keyframes md-preloader-rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes md-preloader-circle-rotate{0%{stroke-dashoffset:100px;transform:rotate(-90deg)}12.5%{stroke-dashoffset:25px;transform:rotate(-90deg)}25%{stroke-dashoffset:100px;transform:rotate(180deg)}25.1%{stroke-dashoffset:100px;transform:rotate(-180deg)}37.5%{stroke-dashoffset:25px;transform:rotate(-180deg)}50%{stroke-dashoffset:100px;transform:rotate(90deg)}50.1%{stroke-dashoffset:100px;transform:rotate(90deg)}62.5%{stroke-dashoffset:25px;transform:rotate(90deg)}75%{stroke-dashoffset:100px;transform:rotate(1turn)}75.1%{stroke-dashoffset:100px;transform:rotate(0deg)}87.5%{stroke-dashoffset:25px;transform:rotate(0deg)}to{stroke-dashoffset:100px;transform:rotate(270deg)}}