CSSと1つのHTML要素で作る、2つの三角形を使ったプリローダーいろいろ

Result

三角形を使ったプリローダーです。全てCSSのみ且つHTMLも1つの要素のみで完結しています

尚、三角形はclip-pathで作られています

css

.pl, .pl:before, .pl:after {
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.pl {
	margin: 0 auto 1.5em auto;
	position: relative;
	width: 3em;
	height: 3em;
}
.pl:before, .pl:after {
	background: currentColor;
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50%;
	transform-origin: 50% 100%;	
	clip-path: polygon(0 0,100% 0,50% 100%);
	-webkit-clip-path: polygon(0 0,100% 0,50% 100%);
}

ベースとなるCSSです。アニメーションの速度とサイズ等を一定に保ちつつ、+αを加えてサンプルのような多様なプリローダーを作っていきます

.pl-fade:before {
	animation-name: fadeA;
}
.pl-fade:after {
	animation-name: fadeB;
}
@keyframes fadeA {
	from, to { opacity: 1; transform: rotate(0deg) }
	25%, 75.1% { opacity: 0; transform: rotate(0deg) }
	25.1%, 75% { opacity: 0; transform: rotate(180deg) }
	50% { opacity: 1; transform: rotate(180deg) }
}
@keyframes fadeB {
	from, 50% { opacity: 0; transform: rotate(90deg) }
	25% { opacity: 1; transform: rotate(90deg) }
	50.1%, to { opacity: 0; transform: rotate(270deg) }
	75% { opacity: 1; transform: rotate(270deg) }
}

例えばフェードエフェクトなら:beforeと:afterの両疑似要素にそれぞれ異なる@keyframesを加えています

他のローダーも同じように作られていますのでちょっとしたフレームワークのように設計されているのでオリジナルも作りやすいと思います

html

<div class="pl pl-fade"></div>

前述したようにHTML要素は1つで済みます

can i use

clip-pathのブラウザ対応状況です。例によってEdgeとIEは動作しませんがEdgeのWebkit化も来年春あたりらしいので気にする必要はなくなるかもしれませんねというかそうなってほしいです

制作業務上は助かるものの、OperaもMSもChrome化（語弊あるかもだけど便宜上）してきているのは少し脅威というかなんというか

セキュア重視のブラウザも出てきてはいるので様子見つつ業務上支障ないものを選ぼうかなと思っています

via

Dual Triangle Preloaders