* {
	padding:0;
	margin:0;
}
html {
	height:100%;
}
body {
	height:100%;
	background:#121212;
	display:flex;
	justify-content:space-around;
	align-items:center;
}
.ripple-right {
	position:relative;
	display:block;
	width:100px;
	height:100px;
	margin:160px auto;
	animation:ripple 0.6s linear infinite;
	border-radius:50px;
	background-color:#FFF;
}
.ripple-right::before,.ripple-right::after {
	content:"";
	position:absolute;
	width:0;
	height:6px;
	background:green;
	border-radius:3px;
	transform-origin:center left;
}
.ripple-right:before {
	transform:rotate(43deg);
	left:25px;
	bottom:49px;
	animation:right-before 500ms forwards alternate;
}
.ripple-right:after {
	left:44px;
	bottom:29px;
	transform:rotate(-50deg);
	animation:right-after 1s 500ms forwards alternate;
}
@keyframes right-before {
	0% {
	width:0;
}
100% {
	width:30px;
}
}@keyframes right-after {
	0% {
	width:0;
}
100% {
	width:50px;
}
}@keyframes ripple {
	0% {
	box-shadow:0 0 0 0 rgba(0,128,0,0.1),0 0 0 20px rgba(0,128,0,0.1),0 0 0 40px rgba(0,128,0,0.1),0 0 0 60px rgba(0,128,0,0.1);
}
100% {
	box-shadow:0 0 0 20px rgba(0,128,0,0.1),0 0 0 40px rgba(0,128,0,0.1),0 0 0 60px rgba(0,128,0,0.1),0 0 0 80px rgba(0,128,0,0);
}
}/*error*/
    .ripple-error {
	position:relative;
	display:block;
	width:100px;
	height:100px;
	margin:160px auto;
	animation:ripple-red 0.6s linear infinite;
	border-radius:50px;
	background-color:#FFF;
}
.ripple-error::before,.ripple-error::after {
	content:"";
	position:absolute;
	width:0;
	height:6px;
	background:#ff1c1c;
	border-radius:3px;
}
.ripple-error:before {
	transform:rotate(45deg);
	left:29px;
	top:27px;
	transform-origin:center left;
	animation:error 500ms ease-in forwards alternate;
}
.ripple-error:after {
	right:29px;
	top:27px;
	transform:rotate(-45deg);
	transform-origin:center right;
	animation:error 500ms ease-in 500ms forwards alternate;
}
@keyframes error {
	0% {
	width:0;
}
100% {
	width:60px;
}
}@keyframes ripple-red {
	0% {
	box-shadow:0 0 0 0 rgba(255,28,28,0.1),0 0 0 20px rgba(255,28,28,0.1),0 0 0 40px rgba(255,28,28,0.1),0 0 0 60px rgba(255,28,28,0.1);
}
100% {
	box-shadow:0 0 0 20px rgba(255,28,28,0.1),0 0 0 40px rgba(255,28,28,0.1),0 0 0 60px rgba(255,28,28,0.1),0 0 0 80px rgba(255,28,28,0);
}
}