◆ 4 色ボールが回ってるあれ
◆ 自分好みにいじって CSS のカスタムプロパティで速度やサイズを調節できるようにした
Chrome のホーム画面で Google の e の右上くらいに Google の 4 色が交差しているアニメーションがあります
Doodle へのリンクみたいでイベントのある日だけなのかあったりなかったりします

あのアニメーションがわりと好きなのですが もうちょっとこうしたいなー とか思うところがあります
中身は CSS で作られていたので 自分好みにしてローディング画面にしてみました

DEMO

--size と --speed を設定することでボールの大きさや回転速度を調節できます
色も変えてみようとしたのですが やっぱり Google 4 色が一番ピンとくるのでそのままです

overlay 要素が全体なので既存ページに貼り付けて表示切り替えするだけでも使えます

<!doctype html>

<style>
	.overlay {
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		display: flex;
		position: fixed;
		background: #333;
		--speed: 900ms;
		--size: 30px;
	}

	.container {
		display: inline-block;
		width: var(--size);
		height: var(--size);
		margin: auto;
		position: relative;
	}


	@keyframes anim-pos {
		0% {
			transform: translate(-100%, 0);
		}

		100% {
			transform: translate(100%, 0);
		}
	}

	@keyframes anim-z-order {
		0% {
			z-index: 2;
		}

		100% {
			z-index: 1;
		}
	}

	.outer {
		width: 100%;
		height: 100%;
		position: absolute;
		animation: anim-z-order calc(var(--speed) * 2) linear infinite;
	}

	.inner {
		width: 100%;
		height: 100%;
		position: absolute;
		border-radius: 50%;
		transform: rotate(90deg);
		animation: anim-pos calc(var(--speed) * 1) cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
	}

	.ball0 {
		animation-delay: calc(var(--speed) * -1.5);
		transform: rotate(0deg);
	}

	.ball1 {
		animation-delay: calc(var(--speed) * -1);
		transform: rotate(90deg);
	}

	.ball2 {
		animation-delay: calc(var(--speed) * -0.5);
		transform: rotate(180deg);
	}

	.ball3 {
		transform: rotate(270deg);
	}

	.ball0 .inner {
		animation-delay: calc(var(--speed) * -0.5);
		background: linear-gradient(270deg, rgb(0, 85, 221), rgb(0, 119, 255), rgb(0, 119, 255));
	}

	.ball1 .inner {
		background: linear-gradient(180deg, rgb(221, 0, 0), rgb(238, 51, 51), rgb(255, 119, 85));
	}

	.ball2 .inner {
		animation-delay: calc(var(--speed) * -0.5);
		background: linear-gradient(90deg, rgb(0, 119, 68), rgb(0, 153, 68), rgb(85, 187, 85));
	}

	.ball3 .inner {
		background: linear-gradient(0deg, rgb(255, 170, 51), rgb(255, 204, 0), rgb(255, 221, 102));
	}
</style>

<div class="overlay">
	<div class="container">
		<div class="outer ball0">
			<div class="inner"></div>
		</div>
		<div class="outer ball1">
			<div class="inner"></div>
		</div>
		<div class="outer ball2">
			<div class="inner"></div>
		</div>
		<div class="outer ball3">
			<div class="inner"></div>
		</div>
	</div>
</div>

このアイコンを見た覚えがあるのが Chrome のカスタムテーマを使ってるときだけなので もしかするとテーマなしだと表示されてないかもです