A few lines of CSS3 code for awesome loading animations

Before you shared the CSS3 implementation of the load animation. Today brings you a few lines of code to achieve an ultra-cool animation loading effects. Let's look at the following:

Online preview Source Download

Implementation code:

Minimalist HTML code:

< Div >        < I ></ I > </ Div >

CSS3 Code:

Body{background:Black;Display:-webkit-box;Display:-webkit-flex;Display:-ms-flexbox;Display:Flex;Height:100VH;}@-webkit-keyframes Rotation{0% {-webkit-transform:Rotate (0deg);Transform:Rotate (0deg); }100%{-webkit-transform:Rotate (360deg);Transform:Rotate (360deg); }} @keyframes Rotation{0% {-webkit-transform:Rotate (0deg);Transform:Rotate (0deg); }100%{-webkit-transform:Rotate (360deg);Transform:Rotate (360deg); }}div{width:200px;Height:200px;Border-radius:50%;Border:1px solid Rgba (0, 255, 0.5);-webkit-box-shadow:0px 0px 20px rgba (0, 255, 0.5), inset 0px 0px 20px rgba (0,, 255, 0.5);Box-shadow:0px 0px 20px rgba (0, 255, 0.5), inset 0px 0px 20px rgba (0,, 255, 0.5);margin:Auto;position:relative;}Div I{content: "";Display:Block;width:0;Height:15px;position:Absolute;Top:-webkit-calc (50%-5px);Top:Calc (50%-5px); Left:2px;-webkit-box-shadow:0px 0px 50px 10px #0078ff;Box-shadow:0px 0px 50px 10px #0078ff;-webkit-transform-origin:100px 0;-ms-transform-origin:100px 0;Transform-origin:100px 0;-webkit-animation:rotation linear 2s infinite;Animation:rotation linear 2s infinite;}

Original address: http://www.w2bc.com/Article/6293

A few lines of CSS3 code for awesome loading animations