このアイデアはダンエデン （ デモ ）から引用したもので、メソッドを少し変更しただけです。
エッセンス
円として、通常のブロックとフレームを使用します。 フレームには任意の色と幅を指定できます（これは、ブロックが背景やその他のものから完全に独立している方法の一意性です）。 フレームを100％に丸め、上部を透明にします。 このギャップに、お気に入りの疑似要素を使用して三角形（ブロックサイズと境界線がゼロのハック）を挿入します。 最後に、ブロックをアニメーション化して、ローディング効果をシミュレートします。
マークアップ：
<span class="spinner"></span>
CSS：
.spinner { display: block; width: 35px; height: 35px; margin: 80px 150px; position: relative; border: 2px solid rgba(0,0,0,0.5); border-top-color: transparent; border-radius: 100%; animation: spin 1s infinite linear; } .spinner:after { content: ''; display: block; width: 0; height: 0; position: absolute; top: -6px; left: 3px; border: 6px solid transparent; border-bottom-color: rgba(0,0,0,0.5); transform: rotate(45deg); } @keyframes spin { to { transform: rotate(360deg); } }
ブラウザのプレフィックスを指定することを忘れないでください！
このメソッドは、すべての最新のブラウザーで機能します（IE <= 9、さようなら！）
Jsfiddleデモ