Home > Article > Web Front-end > CSS3动画实现loading加载图标_html/css_WEB-ITnose

CSS3动画实现loading加载图标_html/css_WEB-ITnose

WBOYOriginal: 2016-06-24 11:39:361254browse

CSS3动画实现loading加载图标，并利用JavaScript封装成插件，方便以后调用。

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); }}

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

Previous article：hasLayout与Block formatting contexts的学习(下)_html/css_WEB-ITnoseNext article：div如何设置才能适应屏幕大小的变化？_html/css_WEB-ITnose

See more

CSS3动画实现loading加载图标_html/css_WEB-ITnose

Related articles