Waiting animation effect production when HTML5 is loading-H5 Tutorial-php.cn

This article introduces you to the perfect solution for HTML5 waiting for loading animation effect through example code. Friends who are interested can refer to it

No more nonsense, I will directly post the code for you, the details The code looks like this:

100

Copy after login

*{margin:0;padding:0;} .loading{ height:100%;width:100%;position:fixed;background:rgba(255,255,255,1); } .loading >p{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;height:160px;width:160px;text-align: center;line-height:160px;font-size: 30px;color:#f00;} .loading p span{position:absolute;display:block;height:140px;width:140px;margin:10px;border-radius:50%;-webkit-box-shadow:0 2px 3px rgba(102,197,37,0.8); animation:loading ease 1s infinite;left:0;top:0;} @keyframes loading{ 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

Copy after login

*{margin:0;padding:0;} .loading{ height:100%;width:100%;position:fixed;background:rgba(255,255,255,0.95); } .loading >p{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;height:30px;width:120px;} .loading >p i{display: block;float:left;margin:0 5px; width:5px;height:30px;background:#f00;transform:scaleY(0.3); animation:loading 1s ease infinite alternate; } .loading >p i:nth-child(2){animation-delay:0.1s;} .loading >p i:nth-child(3){animation-delay:0.2s;} .loading >p i:nth-child(4){animation-delay:0.3s;} .loading >p i:nth-child(5){animation-delay:0.4s;} @keyframes loading{ 0,40%,100%{transform:scaleY(0.3);} 20%{transform:scaleY(1);} }

Copy after login

In fact, what I want to do is load the progress bar effect, but the fake progress bar is too bad, and there is really no particularly good way to judge the picture. It always feels like it's leaking.

This is the code, there is a perfect solution.

Copy after login

The above is the detailed content of Waiting animation effect production when HTML5 is loading. For more information, please follow other related articles on the PHP Chinese website!