CSSで二つの小さな四角形がぐるぐる四角を描いて回るローディングアイコンを作りました。

<div class="loader"></div>

.loader {
	position: relative;
	box-shadow: 0 0 0 12px #eee inset;
	width: 64px;
	height: 64px;
}

/* 小さな四角形二つ */
.loader:before,
.loader:after {
	position: absolute;
	background: #7fcfe2;
	content: "";
	width: 12px;
	height: 12px;
	left: 0;
	top: 0;
	animation: square 4s linear infinite;
}

/* アニメーション開始位置をずらす */
.loader:after {
	animation-delay: -2s;
}

/* アニメーション定義 */
@keyframes square {
	25% {
		left: 100%;
		top: 0;
		transform: translate(-100%, 0);
	}
	50% {
		left: 100%;
		top: 100%;
		transform: translate(-100%, -100%);
	}
	75% {
		left: 0;
		top: 100%;
		transform: translate(0, -100%);
	}
}

要素は一個で。ベンダープレフィックスは適宜追加してください。

ポジション指定とtranslateの%では基準が違うので、組み合わせることで左端から右端、上端から下端といった移動ができます。

二つの擬似要素をアニメーションさせますが、同じ動きなので、一つのkeyframesを適用して、片方の開始位置をanimation-delayでちょうど半分ずらしています。

ここでは省略していますが、デモのように片っぽの色を変えるのもかわいくて良いと思います。