SOURCE

<div class="mask" id="mask"></div>

<img src='https://images.unsplash.com/photo-1627534640397-561c6d443171?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyODYwNzI0MA&ixlib=rb-1.2.1&q=80&w=400' alt=''>

* {
	box-sizing: border-box;
}

body {
	background: radial-gradient(circle at center, lightgray 0.2rem, white 0);
	background-size: 1rem 1rem;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

.mask {
	background: linear-gradient(to right, transparent 50%, black 0);
	display: inline-block;
	position: absolute;
	left: -100%;
	margin: 0;
	width: 3rem;
	height: 3rem;
	border-radius: 100%;
	animation: rotate 10000ms infinite;
}

@keyframes rotate {
	to {
		transform: rotate(360deg);
	}
}

img {
  mask-image: -moz-element(#mask);
	mask-size: min(50vw, 25rem) min(50vw, 25rem);
	mask-repeat: no-repeat;
	mask-position: center center;
	width: min(100%, 50rem);
}