纯CSS实现按钮提交等待效果，半透明 + loading动画 + disable，不用任何js/html，仅需一个css即可。
纯CSS实现按钮提交等待效果，半透明 + loading动画 + disable，不用任何js/html，仅需一个css即可。
<!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> button { opacity: 0.5; cursor: default; pointer-events: none; width:200px; height:50px; margin:100px auto;/*应用到项目时，可去掉*/ } button:before { content: ''; display: inline-block; width: 1em; height: 1em; margin-right: 0.5em; color: red; border: 1px solid red; border-radius: 50%; vertical-align: -10%; clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 0% 30%); animation: rotate 1s linear infinite; } @keyframes rotate { from { transform: rotatez(0deg); } to { transform: rotatez(360deg); } } </style></head><body> <button>css-loading</button></body></html>
