Animatie linie intrerupta

<div class="wave">
	<div class="wave-layer">
		<div class="wave-layer-square wave-layer-square1"></div>
		<div class="wave-layer-square wave-layer-square2"></div>
		<div class="wave-layer-square wave-layer-square3"></div>
		<div class="wave-layer-square wave-layer-square4"></div>
		<div class="wave-layer-square wave-layer-square5"></div>
		<div class="wave-layer-square wave-layer-square6"></div>
		<div class="wave-layer-square wave-layer-square7"></div>
		<div class="wave-layer-square wave-layer-square8"></div>
		<div class="wave-layer-square wave-layer-square9"></div>
		<div class="wave-layer-square wave-layer-square10"></div>
		<div class="wave-layer-square wave-layer-square11"></div>
		<div class="wave-layer-square wave-layer-square12"></div>
		<div class="wave-layer-square wave-layer-square13"></div>
		<div class="wave-layer-square wave-layer-square14"></div>
		<div class="wave-layer-square wave-layer-square15"></div>
	</div>
	<div class="wave-layer">
		<div class="wave-layer-square"></div>
		<div class="wave-layer-square"></div>
		<div class="wave-layer-square"></div>
		<div class="wave-layer-square"></div>
		<div class="wave-layer-square"></div>
		<div class="wave-layer-square"></div>
		<div class="wave-layer-square"></div>
		<div class="wave-layer-square"></div>
		<div class="wave-layer-square"></div>
		<div class="wave-layer-square"></div>
		<div class="wave-layer-square"></div>
		<div class="wave-layer-square"></div>
		<div class="wave-layer-square"></div>
		<div class="wave-layer-square"></div>
		<div class="wave-layer-square"></div>
	</div>
</div>

	.wave{
		width: 100%;
		min-width: 100px;
		max-width: 300px;
		height: 30px;
		background: white;
		margin: auto;
		position: relative;
		box-shadow: inset 2px 2px 0 black, inset -2px -2px 0 black;
	}
		.wave-layer{
			width:  calc(100% - 10px);
			height: calc(100% - 10px);
			padding: 5px;
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
			.wave-layer-square{
				width: calc(100% / 15 - 2px);
				height: 4px;
				background: black;
			}
			.wave-layer-square1,
			.wave-layer-square2,
			.wave-layer-square3,
			.wave-layer-square4,
			.wave-layer-square5,
			.wave-layer-square6,
			.wave-layer-square7,
			.wave-layer-square8,
			.wave-layer-square9,
			.wave-layer-square10,
			.wave-layer-square11,
			.wave-layer-square12,
			.wave-layer-square13,
			.wave-layer-square14,
			.wave-layer-square15{
				animation: wave-layer-square 3s infinite alternate;
			}
			@keyframes wave-layer-square{
				0%,
				20%{
					margin-top: 0;
				}
				40%,
				50%{
					margin-top: 13px;
				}
				60%,
				70%{
					margin-top: -13px;
				}
				90%,
				100%{
					margin-top: 0;
				}
			}
			.wave-layer-square1{
				animation-delay: 100ms;
			}
			.wave-layer-square2{
				animation-delay: 150ms;
			}
			.wave-layer-square3{
				animation-delay: 200ms;
			}
			.wave-layer-square4{
				animation-delay: 250ms;
			}
			.wave-layer-square5{
				animation-delay: 300ms;
			}
			.wave-layer-square6{
				animation-delay: 350ms;
			}
			.wave-layer-square7{
				animation-delay: 400ms;
			}
			.wave-layer-square8{
				animation-delay: 450ms;
			}
			.wave-layer-square9{
				animation-delay: 500ms;
			}
			.wave-layer-square10{
				animation-delay: 600ms;
			}
			.wave-layer-square11{
				animation-delay: 650ms;
			}
			.wave-layer-square12{
				animation-delay: 700ms;
			}
			.wave-layer-square13{
				animation-delay: 750ms;
			}
			.wave-layer-square14{
				animation-delay: 800ms;
			}
			.wave-layer-square15{
				animation-delay: 850ms;
			}