Scrolldown animation

Html

<div class="loader">
	<div class="loader__circle"></div>
	<div class="loader__circle loader__circle--delay"></div>
</div>

Scss

		
.scroll-indicator {
	&__item {
		position: relative;
		border: 2px solid $color-black;
		height: 3.6rem;
		width: 2rem;
		border-radius: 1.5rem;
	}
	&__item::after {
		content: '';
		position: absolute;
		top: 1rem;
		left: .7rem;
		width: .2rem;
		height: .6rem;
		background-color: $color-black;
		animation: scroll-indicator 1.8s linear 0s infinite normal none;
	}
}
// scroll down wheel animation
@keyframes scroll-indicator {
	0% {
		transform: translate3d(0,0,0);
		opacity: 1;
	}

	35% {
		transform: translate3d(0,.6rem,0);
		opacity: 1;
	}

	50% {
		transform: translate3d(0,.8rem,0);
		opacity: 0;
	}

	51% {
		transform: translate3d(0,0,0);
		opacity: 0;
	}

	80% {
		transform: translate3d(0,0,0);
		opacity: 0;
	}
}