项目中有用到loading
有用过各种loading.gif
element-ui 图标,设计大大都不满意
没办法,只能手写
网上查找,整理为直接所需
好记性不如烂笔头.
先记为敬
效果图:
直接上代码
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" type="text/css" href="loading.css"> <style> body{ padding:100px; } </style> </head> <body> <!-- 线性-渐变 --> <div class="loader-liner line-fade-loader"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <!-- ball-缩放 --> <div class="loader-ball ball-fade-loader"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>
css- loading.css
.loader-liner { position: relative; width: 14px; height: 14px; } .loader-ball { position: relative; width: 30px; height: 30px; margin-top:100px; background-color: #989ca1; } /* 线性-渐变 */ @-webkit-keyframes line-fade-loader { 12.5% { opacity: 0.15; } 25% { opacity: 0.25; } 25% { opacity: 0.35; } 37.5% { opacity: 0.45; } 50% { opacity: 0.55; } 62.5% { opacity: 0.65; } 87.5% { opacity: 0.75; } 100% { opacity: 0.85; } } @keyframes line-fade-loader { 15% { opacity: 0.15; } 25% { opacity: 0.25; } 25% { opacity: 0.35; } 37.5% { opacity: 0.45; } 50% { opacity: 0.55; } 62.5% { opacity: 0.65; } 87.5% { opacity: 0.75; } 100% { opacity: 0.85; } } .line-fade-loader { position: relative; } .line-fade-loader > div:nth-child(1) { top: 10px; left: 6px; -webkit-animation: line-fade-loader 0.8s 0.12s infinite linear; animation: line-fade-loader 0.8s 0.12s infinite linear; } .line-fade-loader > div:nth-child(2) { top: 9px; left: 10px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: line-fade-loader 0.8s 0.24s infinite linear; animation: line-fade-loader 0.8s 0.24s infinite linear; } .line-fade-loader > div:nth-child(3) { top: 5px; left: 11px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-animation: line-fade-loader 0.8s 0.36s infinite linear; animation: line-fade-loader 0.8s 0.36s infinite linear; } .line-fade-loader > div:nth-child(4) { top: 1px; left: 10px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: line-fade-loader 0.8s 0.48s infinite linear; animation: line-fade-loader 0.8s 0.48s infinite linear; } .line-fade-loader > div:nth-child(5) { top: 0px; left: 6px; -webkit-animation: line-fade-loader 0.8s 0.6s infinite linear; animation: line-fade-loader 0.8s 0.6s infinite linear; } .line-fade-loader > div:nth-child(6) { top: 1px; left: 2px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: line-fade-loader 0.8s 0.72s infinite linear; animation: line-fade-loader 0.8s 0.72s infinite linear; } .line-fade-loader > div:nth-child(7) { top: 5px; left: 1px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-animation: line-fade-loader 0.8s 0.84s infinite linear; animation: line-fade-loader 0.8s 0.84s infinite linear; } .line-fade-loader > div:nth-child(8) { top: 9px; left: 2px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: line-fade-loader 0.8s 0.96s infinite linear; animation: line-fade-loader 0.8s 0.96s infinite linear; } .line-fade-loader > div { position: absolute; width: 2px; height: 4px; background-color: #294872; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /* ball scale */ @-webkit-keyframes ball-fade-loader { 50% { opacity: 0.3; -webkit-transform: scale(0.4); transform: scale(0.4); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes ball-fade-loader { 50% { opacity: 0.3; -webkit-transform: scale(0.4); transform: scale(0.4); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .ball-fade-loader { position: relative; } .ball-fade-loader > div:nth-child(1) { top: 23px; left: 12px; -webkit-animation: ball-fade-loader 0.8s 0s infinite linear; animation: ball-fade-loader 0.8s 0s infinite linear; } .ball-fade-loader > div:nth-child(2) { top: 20px; left: 20px; -webkit-animation: ball-fade-loader 0.8s 0.12s infinite linear; animation: ball-fade-loader 0.8s 0.12s infinite linear; } .ball-fade-loader > div:nth-child(3) { top: 12px; left: 23px; -webkit-animation: ball-fade-loader 0.8s 0.24s infinite linear; animation: ball-fade-loader 0.8s 0.24s infinite linear; } .ball-fade-loader > div:nth-child(4) { top: 4px; left: 20px; -webkit-animation: ball-fade-loader 0.8s 0.36s infinite linear; animation: ball-fade-loader 0.8s 0.36s infinite linear; } .ball-fade-loader > div:nth-child(5) { top: 1px; left: 12px; -webkit-animation: ball-fade-loader 0.8s 0.48s infinite linear; animation: ball-fade-loader 0.8s 0.48s infinite linear; } .ball-fade-loader > div:nth-child(6) { top: 4px; left: 4px; -webkit-animation: ball-fade-loader 0.8s 0.6s infinite linear; animation: ball-fade-loader 0.8s 0.6s infinite linear; } .ball-fade-loader > div:nth-child(7) { top: 12px; left: 1px; -webkit-animation: ball-fade-loader 0.8s 0.72s infinite linear; animation: ball-fade-loader 0.8s 0.72s infinite linear; } .ball-fade-loader > div:nth-child(8) { top: 20px; left: 4px; -webkit-animation: ball-fade-loader 0.8s 0.84s infinite linear; animation: ball-fade-loader 0.8s 0.84s infinite linear; } .ball-fade-loader > div { background-color: #ffffff; width: 6px; height: 6px; border-radius: 6px; -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute; }