css3动画提交成功圆圈画对勾动画 css3完成提交完成动画

css3完成动画，对号的动画要在圆圈执行完动画后执行。下面的setTimeout是模拟表单提交成功之后的动画显示。刚开始css3 animation_collect 一直在旋转可以假设是点击submit 按钮触发这个loading; css3的 animation_true 一笔一画的画对号则就是form表单提交之后服务器返回的状态接收。

整个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>