整个html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3动画提交成功圆圈画对勾动画</title>
<style>
.loader {
position: relative;
width: 80px;
height: 80px;
border-radius: 50%;
border: 4px solid rgba(165, 220, 134, 0.2);
border-left-color: #A5DC86;
animation: animation_collect 0.5s linear infinite;
}
@keyframes animation_collect{from{transform: rotate(0deg)}
to{transform: rotate(360deg)}
}
.loader::before {
position: absolute;
content: '';
top: 50%;
left: 15px;
border: 4px solid #A5DC86;
border-left-width: 0;
border-bottom-width: 0;
transform: scaleX(-1) rotate(135deg);
transform-origin: left top;
opacity: 0;
}
@keyframes animation_true {
0% {
opacity: 0;
width: 0px;
height: 0px;
}
33% {
opacity: 1;
width: 20px;
height: 0px;
}
100% {
opacity: 1;
width: 20px;
height: 40px;
}
}
.loader.active{
animation:none;
border-color: #A5DC86;
}
.loader.active::before{
animation: animation_true 0.2s 0.2s linear 1 both;
}
</style>
</head>
<body>
<div style="display: block;margin: 20px auto;width:300px;">
css3完成动画,对号的动画要在圆圈执行完动画后执行。
下面的setTimeout是模拟表单提交成功之后的动画显示。
刚开始css3 animation_collect 一直在旋转可以假设是点击submit 按钮触发这个loading;
css3的 animation_true 一笔一画的画对号 则就是form表单提交之后服务器返回的状态接收。
</div>
<div style="padding:10px;display: flex;justify-content: center;">
<div class="loader"></div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
jQuery(function(){
setTimeout(function(){
jQuery(".loader").addClass("active");
},3000);
});
</script>
</body>
</html>