Super Cool CSS3 loading loading animation effects

Brief tutorials

This is a super cool CSS3 loading loading animation effect. This loading animation uses CSS3CSS3 animation animation to make, it is simple code, the effect is very cool.

How to use

HTML structure

Using a <div> element as the container for the loading animation, there are two child elements inside. Where div.loading-1 is the loading progress bar. Div.loading-2 is the loading text.

<div class= "Loader" >    <div class= "loading-1" ></div>    <div class= "Loading-2" >loading ...</div></div>

CSS Styles

The loading animation uses 3 animation animations, and the first load animation is for the progress bar to move from 0 to 100%. The second turn animation is used for the progress bar to rotate in the y-axis direction. A third bounce animation is used to bounce text.

. loader {width:150px;    margin:50px Auto 70px; Position:relative;}.    Loader. loading-1 {position:relative;    width:100%;    height:10px;    border:1px solid #69d2e7;    border-radius:10px; Animation:turn 4s linear 1.75s infinite;}.    Loader. Loading-1:before {content: "";    Display:block;    Position:absolute;    width:0%;    height:100%;    Background: #69d2e7;    box-shadow:10px 0px 15px 0px #69d2e7; animation:load 2s linear infinite;}.    Loader. loading-2 {width:100%;    Position:absolute;    top:10px;    Color: #69d2e7;    font-size:22px;    Text-align:center; animation:bounce 2s linear infinite;}    @keyframes Load {0% {width:0%;    } 87.5%, 100% {width:100%;    }} @keyframes Turn {0% {transform:rotatey (0deg);    } 6.25%, 50% {transform:rotatey (180deg);    } 56.25%, 100% {transform:rotatey (360deg);    }} @keyframes Bounce {0%,100% {top:10px; } 12.5% {top: 30px; }}

The above is super cool CSS3 loading loading animation effect content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

