コピペでできる！cssとhtmlのみで作るanimationの四角やバーを使ったローディングイメージ6種

CSS HTML
 2018.03.15
 2018.03.23

cssのanimationを使ってできるローディングのイメージサンプルです。
四角やバーを使用したものを集めました。

browser:  65 11 20 10 

四角やバーを使用したローディング[6種]

四角いパーツが横にスライドするローディング

ニャン易度 
<div class="cp_loading16">
	<div class="cp_item"></div>
	<div class="cp_item"></div>
	<div class="cp_item"></div>
</div>
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_loading16 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 25%;
	-webkit-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
}
.cp_loading16 .cp_item {
	position: absolute;
	width: 25%;
	height: 10px;
	-webkit-animation: loading16 2s infinite ease-out;
	        animation: loading16 2s infinite ease-out;
	background: #26c6da;
}
.cp_loading16 .cp_item:nth-of-type(0n+1) {
	transform: scale(1.8, 1);
	-webkit-animation-delay: 0.2s;
	        animation-delay: 0.2s;
	opacity: 0.2;
}
.cp_loading16 .cp_item:nth-of-type(0n+2) {
	transform: scale(1.4, 1);
	-webkit-animation-delay: 0.1s;
	        animation-delay: 0.1s;
	opacity: 0.4;
}
.cp_loading16 .cp_item:nth-of-type(0n+3) {
	opacity: 0.8;
}
@-webkit-keyframes loading16 {
	0%, 100% {
		left: 0;
	}
	50% {
		left: 100%;
	}
}
@keyframes loading16 {
	0%, 100% {
		left: 0;
	}
	50% {
		left: 100%;
	}
}

四角いパーツが横に広がりながら光るローディング

ニャン易度 
<div class="cp_loading17">
	<div class="cp_item"></div>
	<div class="cp_item"></div>
	<div class="cp_item"></div>
	<div class="cp_item"></div>
	<div class="cp_item"></div>
</div>
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_loading17 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	-webkit-transform: translate(-50%,-50%);
					transform: translate(-50%,-50%);
}
.cp_loading17 .cp_item {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 1px;
	margin-left: 1px;
	-webkit-animation: loading17 1s ease-in infinite;
	        animation: loading17 1s ease-in infinite;
	-webkit-animation-delay: 0;
	        animation-delay: 0;
	opacity: 0.1;
	background-color: #ff7043;
}
.cp_loading17 .cp_item:nth-child(1) {
	-webkit-animation-delay: 0.3s;
	        animation-delay: 0.3s;
}
.cp_loading17 .cp_item:nth-child(2) {
	-webkit-animation-delay: 0.2s;
	        animation-delay: 0.2s;
}
.cp_loading17 .cp_item:nth-child(3) {
	-webkit-animation-delay: 0.1s;
	        animation-delay: 0.1s;
}
.cp_loading17 .cp_item:nth-child(4) {
	-webkit-animation-delay: 0.2s;
	        animation-delay: 0.2s;
}
.cp_loading17 .cp_item:nth-child(5) {
	-webkit-animation-delay: 0.3s;
	        animation-delay: 0.3s;
}
@-webkit-keyframes loading17 {
	0% {
		-webkit-transform: scale(1.2);
		        transform: scale(1.2);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(0.7);
		        transform: scale(0.7);
		opacity: 0.1;
	}
}
@keyframes loading17 {
	0% {
		-webkit-transform: scale(1.2);
		        transform: scale(1.2);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(0.7);
		        transform: scale(0.7);
		opacity: 0.1;
	}
}

4つの四角が近づいたり離れたりするローディング

ニャン易度 
<div class="cp_loading18">
	<div class="cp_item"></div>
	<div class="cp_item"></div>
	<div class="cp_item"></div>
	<div class="cp_item"></div>
</div>
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_loading18 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	-webkit-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
}
.cp_loading18 .cp_item {
	display: inline-block;
	width: 22px;
	height: 23px;
	-webkit-animation: loading18 1.3s infinite ease-out;
	        animation: loading18 1.3s infinite ease-out;
	opacity: .5;
}
.cp_loading18 .cp_item:nth-child(1) {
	-webkit-transform: translate(0, -25px);
	        transform: translate(0, -25px);
	background: #e91e63;
}

.cp_loading18 .cp_item:nth-child(2) {
	-webkit-transform: translate(25px, 0);
	        transform: translate(25px, 0);
	background: #2196F3;
}
.cp_loading18 .cp_item:nth-child(3) {
	-webkit-transform: translate(-25px, 0);
	        transform: translate(-25px, 0);
	background: #00BCD4;
}
.cp_loading18 .cp_item:nth-child(4) {
	-webkit-transform: translate(0, 25px);
	        transform: translate(0, 25px);
	background: #CDDC39;
}
@-webkit-keyframes loading18 {
	33% {
		-webkit-transform: translate(0, 0) rotate(-20deg);
		        transform: translate(0, 0) rotate(-20deg);
		opacity: 0.7;
	}
	66% {
		-webkit-transform: translate(0, 0) rotate(20deg);
		        transform: translate(0, 0) rotate(20deg);
		opacity: 0.7;
	}
}
@keyframes loading18 {
	25% {
		-webkit-transform: translate(0, 0) rotate(-20deg);
		        transform: translate(0, 0) rotate(-20deg);
		opacity: 0.7;
	}
	75% {
		-webkit-transform: translate(0, 0) rotate(20deg);
		        transform: translate(0, 0) rotate(20deg);
		opacity: 0.7;
	}
}

4つの四角が一つずつ点滅するローディング

ニャン易度 
<div class="cp_loading19">
	<div class="cp_item"></div>
	<div class="cp_item"></div>
	<div class="cp_item"></div>
	<div class="cp_item"></div>
</div>
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_loading19 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 42px;
	height: 42px;
	-webkit-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
}
.cp_loading19 .cp_item {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0px 2px;
	opacity: 1;
}
.cp_loading19 .cp_item {
	-webkit-animation: loading19 2s infinite ease;
	        animation: loading19 2s infinite ease;
	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
}
.cp_loading19 .cp_item:nth-child(1) {
	background: #FF7043;
}
.cp_loading19 .cp_item:nth-child(2) {
	-webkit-animation-delay: 0.5s;
	        animation-delay: 0.5s;
	background: #42A5F5;
}
.cp_loading19 .cp_item:nth-child(3) {
	-webkit-animation-delay: 1.5s;
	        animation-delay: 1.5s;
	background: #EC407A;
}
.cp_loading19 .cp_item:nth-child(4) {
	-webkit-animation-delay: 1s;
	        animation-delay: 1s;
	background: #66BB6A;
}
@-webkit-keyframes loading19 {
	0% {
		opacity: 0.7;
	}
	30% {
		opacity: 0.5;
	}
	60% {
		opacity: 0;
	}
	75% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes loading19 {
	0% {
		opacity: 0.7;
	}
	30% {
		opacity: 0.5;
	}
	60% {
		opacity: 0;
	}
	75% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

バーが上に伸びたり縮んだりするローディング

ニャン易度 
<span class="cp_loading20"><span> </span><span> </span></span>
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_loading20 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 50px;
	-webkit-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
}
.cp_loading20:before,
.cp_loading20:after,
.cp_loading20 span {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 14px;
	height: 50px;
	content: '';
	-webkit-animation: loading20 1.5s ease-in-out infinite;
	        animation: loading20 1.5s ease-in-out infinite;
	-webkit-transform-origin: 100% 100%;
	        transform-origin: 100% 100%;
}
.cp_loading20:before {
	background-color: #D81B60;
}
.cp_loading20:after {
	left: 18px;
	-webkit-animation-delay: -0.3s;
	animation-delay: -0.3s;
	background-color: #3949AB;
}
.cp_loading20 span {
	left: 36px;
	-webkit-animation-delay: -0.6s;
	animation-delay: -0.6s;
	background-color: #00ACC1;
}
.cp_loading20 span:nth-child(2) {
	left: 54px;
	-webkit-animation-delay: -1.2s;
	animation-delay: -1.2s;
	background-color: #FB8C00;
}
@-webkit-keyframes loading20 {
	0% {
		-webkit-transform: scaleY(0);
		        transform: scaleY(0);
		opacity: 0;
	}
	50% {
		-webkit-transform: scaleY(1);
		        transform: scaleY(1);
		opacity: 1;
	}
	100% {
		-webkit-transform: scaleY(0);
		        transform: scaleY(0);
		opacity: 0;
	}
}
@keyframes loading20 {
	0% {
		-webkit-transform: scaleY(0);
		        transform: scaleY(0);
		opacity: 0;
	}
	50% {
		-webkit-transform: scaleY(1);
		        transform: scaleY(1);
		opacity: 1;
	}
	100% {
		-webkit-transform: scaleY(0);
		        transform: scaleY(0);
		opacity: 0;
	}
}

バーが左右に伸びたり縮んだりするローディング

ニャン易度 
<span class="cp_loading21"><span> </span><span> </span></span>
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_loading21 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 68px;
	-webkit-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
}
.cp_loading21:before,
.cp_loading21:after,
.cp_loading21 span {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 50px;
	height: 14px;
	content: '';
	-webkit-animation: loading21 1.8s ease-in-out infinite;
	        animation: loading21 1.8s ease-in-out infinite;
	-webkit-transform-origin: 50% 50%;
	        transform-origin: 50% 50%;
}
.cp_loading21:before {
	background-color: #D81B60;
}
.cp_loading21:after {
	top: 18px;
	-webkit-animation-delay: -0.3s;
	        animation-delay: -0.3s;
	background-color: #3949AB;
}
.cp_loading21 span {
	top: 36px;
	-webkit-animation-delay: -0.6s;
	        animation-delay: -0.6s;
	background-color: #00ACC1;
}
.cp_loading21 span:nth-child(2) {
	top: 54px;
	-webkit-animation-delay: -1.2s;
	        animation-delay: -1.2s;
	background-color: #FB8C00;
}
@-webkit-keyframes loading21 {
	0% {
		-webkit-transform: scaleX(0);
		        transform: scaleX(0);
		opacity: 0;
	}
	50% {
		-webkit-transform: scaleX(1);
		        transform: scaleX(1);
		opacity: 1;
	}
	100% {
		-webkit-transform: scaleX(0);
		        transform: scaleX(0);
		opacity: 0;
	}
}
@keyframes loading21 {
	0% {
		-webkit-transform: scaleX(0);
		        transform: scaleX(0);
		opacity: 0;
	}
	50% {
		-webkit-transform: scaleX(1);
		        transform: scaleX(1);
		opacity: 1;
	}
	100% {
		-webkit-transform: scaleX(0);
		        transform: scaleX(0);
		opacity: 0;
	}
}

シンプルなローディングが欲しい

copypet.jp

コピペでできる！cssとhtmlのみで作るanimationを使ったぐるぐる回るローディングイメージ5種 | copypet.jp｜パーツで探す、web制作に使えるコピペサイト。

cssのanimationでできることって実際どんな感じなのよ？ぶっちゃけ解説はいいから動きが見たいってことで。 基本的な動きのアニメーションサンプルをご紹介します。…

copypet.jp

記事を見る

cssのanimation設定ってどんな動きができるの？いい感じに設定するにはどうしたらいい？

copypet.jp

cssのanimation設定ってどんな動きができるの？いい感じに設定するにはどうしたらいい？ | copypet.jp｜パーツで探す、web制作に使えるコピペサイト。

cssのanimationプロパティってどんな設定をするとどんな動きになるのか、意外とわかっていない人も多いのでは？…

copypet.jp

記事を見る

基本的な動きのアニメーションサンプル

copypet.jp

コピペでできる！cssとhtmlのみで作る基本的な動きのアニメーションサンプル | copypet.jp｜パーツで探す、web制作に使えるコピペサイト。

cssのanimationでできることって実際どんな感じなのよ？ぶっちゃけ解説はいいから動きが見たいってことで。 基本的な動きのアニメーションサンプルをご紹介します。…

copypet.jp

記事を見る

copypet.jp

CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか？