1.大小不一的小圆形加载
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div style="width:100%;height:100vh;display: flex;justify-content: center;background-color: rgb(195, 191, 191);"> <div class="d1"> <p></p> <p></p> <p></p> <p></p> </div> <div class="d1"> <p></p> <p></p> <p></p> <p></p> </div> </div></body><style> *{ margin: 0; padding: 0; } .d1{ width: 50px; height: 50px; position: absolute; margin: 100px; } .d1 p{ width: 14px; height: 14px; border-radius: 50%; background: rgba(31, 165, 242, 1); position: absolute; animation: dong 1.5s linear infinite; } .d1 p:nth-child(1){ top: 0; left: 0; } .d1 p:nth-child(2){ top: 0; right: 0; } .d1 p:nth-child(3){ right: 0; bottom: 0; } .d1 p:nth-child(4){ bottom: 0; left: 0; } .d1:nth-of-type(2){ transform: rotate(45deg); } @keyframes dong{ 0%{ transform: scale(0); } 50%{ transform: scale(1); } 100%{ transform: scale(0); } } .d1:nth-of-type(1) p:nth-of-type(1){ /*负值:动画间接开始,但跳过前...秒动画*/ animation-delay: -0.1s; } .d1:nth-of-type(2) p:nth-of-type(1){ animation-delay: -0.3s; } .d1:nth-of-type(1) p:nth-of-type(2){ animation-delay: -0.5s; } .d1:nth-of-type(2) p:nth-of-type(2){ animation-delay: -0.7s; } .d1:nth-of-type(1) p:nth-of-type(3){ animation-delay: -0.9s; } .d1:nth-of-type(2) p:nth-of-type(3){ animation-delay: -1.1s; } .d1:nth-of-type(1) p:nth-of-type(4){ animation-delay: -1.3s; } .d1:nth-of-type(2) p:nth-of-type(4){ animation-delay: -1.5s; }</style></html>成果：
2.水波loading
思维：使用旋转动画和radius属性即可实现：
去掉彩色背景：
<!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> <style> * { margin: 0; padding: 0 } body { /* background-color: black */ } .box { margin: 200px auto; height: 50px; width: 50px; border-radius: 10px; background-color: rgb(0, 174, 255); position: relative; overflow: hidden; border: 1px solid rgb(0, 174, 255); border-top: none; } .a { width: 200px; height: 200px; background: #ffffff; position: absolute; left: -80px; top: -180px; border-radius: 80px; animation: xuanzhuan 5s linear infinite; z-index: 2 } @keyframes xuanzhuan{ 0%{transform: rotate(0deg)} 100%{transform: rotate(360deg)} } </style></head><body> <div class="box"> <div class="a"></div> </div></body></html>3.一般的loading
<!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> <style> *{margin: 0;padding: 0} li{list-style: none} body,html{ background-color: black; } ul{ height: 40px; width: 200px; margin: 50px auto; } ul>li{ float: left; height: 20px; width: 20px; border-radius: 50%; background: white; margin-left: 10px; animation: move 2s infinite alternate; transform: scale(0.5) } ul>li:nth-of-type(2){ animation-delay: 0.5s; } ul>li:nth-of-type(3){ animation-delay:1s; } @keyframes move{ 0%{transform: scale(0.5);opacity: 0.5} 100%{transform: scale(1);opacity: 1;} } </style></head><body> <ul> <li></li> <li></li> <li></li> </ul></body></html>4.正方形loading：
<!doctype html><html lang="zh-cn"><head><meta charset="UTF-8"><meta name="renderer" content="webkit"><link rel="shortcut icon" type="images/x-icon" href="/template/images/ufw.ico"><title>loading-04</title></head><body><style> .csshub-loading-icon{ padding:10px; width:10px; height:10px; border-top:20px solid #ED5548; border-right:20px solid #599CD3; border-bottom: 20px solid #5CBD5E; border-left:20px solid #FDD901; background:transparent; animation: csshub-rotate-right-round 1.2s ease-in-out infinite alternate ; } @keyframes csshub-rotate-right-round { 0% { transform: rotate(0deg);} 50% {transform: rotate(180deg); } 100% {transform: rotate(360deg);border-radius:50%;} }</style><div style="margin-top: 100px;display: flex;justify-content: center;"> <div class="csshub-loading-icon"></div></div></body></html>5.穿插loading：
<!doctype html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="renderer" content="webkit"></head><body> <style> body { background-color: #F5F5F5; padding: 100px 120px; } .box { margin-left: 500px; display: block; width: 64px; height: 64px; transform-origin: 16px 16px; /* 旋转 */ animation: xuanzhuan 5s infinite; } /* 平移 */ .ping { animation: pingyi 2.5s infinite; position: absolute; } .hang { width: 64px; height: 24px; position: absolute; } .hang:nth-child(0) { transform: rotate(0deg); } .hang:nth-child(1) { transform: rotate(90deg); } .hang:nth-child(2) { transform: rotate(180deg); } .hang:nth-child(3) { transform: rotate(270deg); } /* 第一个小珠子 */ .ping:nth-child(1) { width: 8px; height: 8px; top: 50%; left: 50%; margin-top: -4px; margin-left: -4px; border-radius: 4px; animation-delay: -0.3s; } /* 第二个小珠子 */ .ping:nth-child(2) { width: 16px; height: 16px; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; border-radius: 8px; -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } /* 第三个小珠子 */ .ping:nth-child(3) { width: 24px; height: 24px; top: 50%; left: 50%; margin-top: -12px; margin-left: -12px; border-radius: 12px; animation-delay: -0.9s; } .blue { background-color: #1f4e5a; } .red { background-color: #ff5955; } .yellow { background-color: #ffb265; } .green { background-color: #00a691; } @keyframes xuanzhuan { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} } @keyframes pingyi { 0% {transform: translateX(0);} 25% { transform: translateX(-64px); } 75% { transform: translateX(32px);} 100% {transform: translateX(0);} } </style> <div class="box"> <div class="hang"> <div class="ping blue"></div> <div class="ping blue"></div> <div class="ping blue"></div> </div> <div class="hang"> <div class="ping yellow"></div> <div class="ping yellow"></div> <div class="ping yellow"></div> </div> <div class="hang"> <div class="ping red"></div> <div class="ping red"></div> <div class="ping red"></div> </div> <div class="hang"> <div class="ping green"></div> <div class="ping green"></div> <div class="ping green"></div> </div> </div></body></html>