Full page Matte effect loading
Css:
. Loading_shade{position:fixed; Left:0;Top:0;width:100%;Height:100%;Display:-webkit-box;-webkit-box-pack:Center;-webkit-box-align:Center;background:Rgba (255,255,255,.7);Z-index: About}. Loading_box{padding:30px;box-sizing:Border-box;-webkit-box-sizing:Border-box}. Loading_box. Loading{width:100px;Height:100px;margin:0 Auto;Background-color:#ff8814;Border-radius:100%;-webkit-animation:load_scaleout 1s infinite ease-in-out;Animation:load_scaleout 1s infinite ease-in-out}. Loading_box. Loading_text{text-align:Center;Color:#333;font-size:. 12rem}@-webkit-keyframes load_scaleout{0% {-webkit-transform:Scale (0)}100%{-webkit-transform:Scale (1);Opacity:0}} @keyframes load_scaleout{0% {Transform:Scale (. 1);-webkit-transform:Scale (. 1)}100%{Transform:Scale (1.5);-webkit-transform:Scale (1.5);Opacity:0}}.loading_oneline_box{font-size:. 12rem;Color:#FFF;text-align:Center}
Html:
<section class= "Loading_shade" id= "J_loading_box" > <div class= "Loading_box" > <div class= " Loading "></div> <p class=" Loading_text "> try to load in ...</p> </div></section>
CSS Loading Effects