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 效果
来源: http://www.bubuko.com/infodetail-2469115.html