Home > Article > Web Front-end > CSS3 animation implements loading loading icon_html/css_WEB-ITnose
CSS3 animation implements loading loading icon_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:39:361297browse
CSS3 animation implements loading loading icon, and uses JavaScript to encapsulate it into a plug-in for easy calling in the future.
index.html
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>Spinner</title> <link rel="stylesheet" href="./css/main.css"></head><body> <script src="./js/spinner.js"></script> <script> window.onload = function(){ spinner.show(); } </script></body></html> spinner.js
(function(exports){ var document = exports.document, mask = createDivWithClassName('spinner-mask'), box = createDivWithClassName('spinner-box'), spinner = createDivWithClassName('spinner'), spinner_container_1 = createDivWithClassName('spinner-container'), spinner_container_2, spinner_container_3, circle_1 = createDivWithClassName('circle1'), circle_2 = createDivWithClassName('circle2'), circle_3 = createDivWithClassName('circle3'), circle_4 = createDivWithClassName('circle4'); spinner_container_1.appendChild(circle_1); spinner_container_1.appendChild(circle_2); spinner_container_1.appendChild(circle_3); spinner_container_1.appendChild(circle_4); spinner_container_2 = spinner_container_1.cloneNode(true); spinner_container_3 = spinner_container_1.cloneNode(true); spinner_container_1.className += ' container1'; spinner_container_2.className += ' container2'; spinner_container_3.className += ' container3'; spinner.appendChild(spinner_container_1); spinner.appendChild(spinner_container_2); spinner.appendChild(spinner_container_3); box.appendChild(spinner); document.body.appendChild(mask); document.body.appendChild(box); var self = Object.create(null); self.show = function(){ mask.style.display = box.style.display = 'block'; }; self.hide = function(){ mask.style.display = box.style.display = 'none'; }; Object.seal(self); Object.freeze(self); Object.preventExtensions(self); exports.spinner = self; function createDivWithClassName(classname){ var div = document.createElement('div'); div.setAttribute('class', classname); return div; } })(window); main.css
html, body{ width: 100%; height: 100%; margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; }.spinner-mask{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; background-color: transparent; display: none; }.spinner-box{ width: 60px; height: 60px; position: fixed; top: 50%; left: 0; right: 0; margin: 0 auto; background-color: #666; border-radius: 4px; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: none; }.spinner{ width: 20px; height: 20px; position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); }.container1>div, .container2>div, .container3>div{ width: 6px; height: 6px; background-color: #eee; border-radius: 50%; position: absolute; -webkit-animation: bouncedelay 1.2s infinite ease-in-out; animation: bouncedelay 1.2s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; }.spinner .spinner-container{ width: 100%; height: 100%; position: absolute; }.container2{ -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); }.container3{ -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); }.circle1{ left: 0; top: 0; }.circle2{ right: 0; top: 0; }.circle3{ right: 0; bottom: 0; }.circle4{ left: 0; bottom: 0; }.container1 .circle1{ -webkit-animation-delay: -1.2s; animation-delay: -1.2s; }.container2 .circle1{ -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }.container3 .circle1{ -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }.container1 .circle2{ -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }.container2 .circle2{ -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }.container3 .circle2{ -webkit-animation-delay: -0.7s; animation-delay: -0.7s; }.container1 .circle3{ -webkit-animation-delay: -0.6s; animation-delay: -0.6s; }.container2 .circle3{ -webkit-animation-delay: -0.5s; animation-delay: -0.5s; }.container3 .circle3{ -webkit-animation-delay: -0.4s; animation-delay: -0.4s; }.container1 .circle4{ -webkit-animation-delay: -0.3s; animation-delay: -0.3s; }.container2 .circle4{ -webkit-animation-delay: -0.2s; animation-delay: -0.2s; }.container3 .circle4{ -webkit-animation-delay: -0.1s; animation-delay: -0.1s; }@-webkit-keyframes bouncedelay{ 0%, 100%{ -webkit-transform: scale(0); transform: scale(0); } 50%{ -webkit-transform: scale(1); transform: scale(1); }}@keyframes bouncedelay{ 0%, 100%{ -webkit-transform: scale(0); transform: scale(0); } 50%{ -webkit-transform: scale(1); transform: scale(1); }}
Copyright Statement : This article is an original article by the blogger and may not be reproduced without the blogger's permission.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn