@font-face{font-family:"demo";src:url('fonts/icons.woff') format("woff"),url('fonts/icons.ttf') format("truetype")}@-moz-keyframes loadingStart{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes loadingStart{0%{opacity:0}100%{opacity:1}}@-o-keyframes loadingStart{0%{opacity:0;}100%{opacity:1;}}@keyframes loadingStart{0%{opacity:0}100%{opacity:1}}@-moz-keyframes loading{0%{-moz-transform:rotate(0deg);transform:rotate(0deg)}50%{-moz-transform:rotate(180deg);transform:rotate(180deg)}100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes loading{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes loading{0%{-o-transform:rotate(0deg);transform:rotate(0deg);}50%{-o-transform:rotate(180deg);transform:rotate(180deg);}100%{-o-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes loading{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}.loading{position:relative;pointer-events:none}#css-input:checked~.loading .loading-overlay{position:absolute;top:0;bottom:0;left:0;right:0;-webkit-animation:loadingStart 3s 300ms linear 1 both;-moz-animation:loadingStart 3s 300ms linear 1 both;-o-animation:loadingStart 3s 300ms linear 1 both;animation:loadingStart 3s 300ms linear 1 both;background:rgba(255,255,255,.5);text-align:center}#css-input:checked~.loading .loading-text{font-size:.875rem;line-height:1.3125rem;text-shadow:white 0 0 1em,white 0 0 .5em,white 0 0 .25em;position:relative;display:block;text-transform:uppercase;font-weight:bold}#css-input:checked~.loading .loading-text:after{content:"..."}#css-input:checked~.loading .loading-spinner{position:absolute;top:50%;bottom:0;left:0;right:0;margin:-3.9375rem auto 0;color:#1a1d1d;text-align:center}#css-input:checked~.loading .loading-icon{font-size:4.8125rem;line-height:5.25rem;text-shadow:rgba(255,255,255,.75) 0 0 .5em;-webkit-animation:loading 1s steps(4) infinite;-moz-animation:loading 1s steps(4) infinite;-o-animation:loading 1s steps(4) infinite;animation:loading 1s steps(4) infinite;display:block;vertical-align:middle}#css-input:checked~.loading .loading-icon:before{vertical-align:middle;content:"";font-family:"demo"}*{box-sizing:border-box}html{font-family:"Franklin Gothic Medium","Franklin Gothic","ITC Franklin Gothic",Arial,sans-serif}.demo{min-width:34em;max-width:52em;margin:1em auto;padding:1em}.demo-content{text-align:right}#target{clear:both;width:100%;height:2em;margin-bottom:1em;padding:0 0 55% 1em;border:2px solid #000;text-align:left}#css-input:checked~#target{background:url('http://placekitten.com/g/800/600') no-repeat;background-size:cover}.toggle-loading{float:left;margin-bottom:1em;padding:1em 2em;border:none;border-radius:.25em;background:#ffc0cb;font:inherit;font-size:1.25em;text-transform:uppercase;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.5);transition:all 150ms}.toggle-loading:focus{outline:none;box-shadow:0 0 1px 2px rgba(0,0,0,.1) inset}.toggle-loading:hover{cursor:pointer;background:#fd9297}.toggle-loading:active{background:#bc6d71;box-shadow:0 0 1px 2px rgba(0,0,0,.25) inset}label[for="css-input"]{display:inline-block;padding-top:3em}pre{overflow:auto;font-family:"Courier New",Courier,"Lucida Sans Typewriter","Lucida Typewriter",monospace,serif;font-size:.85em;line-height:1.5em;color:grey}.code-samples .js{float:left;width:50%;padding-right:1em;margin-bottom:1em}.code-samples .html{float:right;width:50%;padding-left:1em;border-left:1px dashed;border-color:grey;margin-bottom:1em}.code-samples .css{clear:both;border-top:1px dashed;border-color:grey}