仿今日頭條按鈕loading效果
阿新 • • 發佈：2018-01-21
out otc ren pro pla radius -s ont blog
效果
代碼：
<!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>btn</title> <style> .btnc{ width: 100px; height: 30px; line-height: 30px; font-size:14px; text-align: center; border: 1px solid transparent; border-radius: 4px; background-color: #d9534f; border-color: #d43f3a; position: relative; } .btnc .btn-progress{ display: none; } .btnc .btnl{ display: block; } .btnc.progress .btn-progress{ display: inline-block !important; } .btnc.progress .btnl{ display: none !important; } .btnl{ text-decoration: none; } .btnl:link,.btnl:visited,.btnl:hover,.btnl:active{ color:#fff; } .btnl:hover,.btnl:active{ background-color: #c0534f; } .btn-progress{ display: inline-block; width:16px; height: 16px; border:1px solid #fff; border-top:0; border-radius: 50%; -webkit-border-radius:50%; animation: progress .6s linear infinite; position: absolute; margin:auto; top:0; left:0; right:0; bottom:0; } @keyframes progress{ 0%{ transform:rotate(0); -webkit-transform:rotate(0); } 100%{ transform:rotate(360deg); -webkit-transform:rotate(360deg); } } @-webkit-keyframes progress{ 0%{ transform:rotate(0); -webkit-transform:rotate(0); } 100%{ transform:rotate(360deg); -webkit-transform:rotate(360deg); } } </style> </head> <body> <div class="j-btnc btnc"> <a href="javascript:;" class="btnl">提交</a> <span class="btn-progress"></span> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> $(‘.j-btnc‘).click(function(){ var $btn = $(this); $btn.addClass(‘progress‘); var p = $.Deferred(); p.then(function(){ $btn.removeClass(‘progress‘); }).catch(function(){ $btn.removeClass(‘progress‘); }); setTimeout(function(){ p.resolve(); },200000); }); </script> </body> </html>
仿今日頭條按鈕loading效果