コピペでできる！cssとhtmlのみで作るanimationを使ったドットが可愛いローディングイメージ10種

CSS HTML
 
 

cssのanimationを使ってできるローディングのイメージサンプルです。
ドットを使用した可愛いものを集めました。

browser:  65 11 20 

ドットが可愛いローディング[10種]

波紋が広がるローディング

ニャン易度 
<div class="cp_loading06"></div>
.cp_loading06 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	-webkit-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
	border-radius: 50%;
	background: radial-gradient(#E91E63, #ffffff);
}
.cp_loading06::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	top: 50%;
	left: 50%;
	border: 0px solid #ffffff;
	-webkit-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	-webkit-animation: loading06 1s ease-out forwards infinite;
	        animation: loading06 1s ease-out forwards infinite;
}
@-webkit-keyframes loading06 {
	0% {
		border: 0 solid #f8bbd0;
	}
	20% {
		width: 0;
		height: 0;
		border: 3px solid #ffffff;
	}
	100% {
		width: 100%;
		height: 100%;
		border: 0 solid #ffffff;
	}
}
@keyframes loading06 {
	0% {
		border: 0 solid #f8bbd0;
	}
	20% {
		width: 0;
		height: 0;
		border: 3px solid #ffffff;
	}
	100% {
		width: 100%;
		height: 100%;
		border: 0 solid #ffffff;
	}
}

4つの丸が離れたりくっついたりしながら回るローディング

ニャン易度 
<div class="cp_loading07">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
</div>
.cp_loading07 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	-webkit-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
}
.cp_loading07 span {
	display: block;
	position: absolute;
	width: 50%;
	height: 50%;
	border-radius: 50%;
}
.cp_loading07 span:nth-child(1) {
	top: 0;
	left: 0;
	-webkit-animation: loading07_mv1 3s cubic-bezier(.11,.75,.48,.94) infinite;
	        animation: loading07_mv1 3s cubic-bezier(.11,.75,.48,.94) infinite;
	background-color: rgba(76,207,224,0.75);
}
.cp_loading07 span:nth-child(2) {
	top: 0;
	right: 0;
	-webkit-animation: loading07_mv2 3s cubic-bezier(.11,.75,.48,.94) infinite;
	        animation: loading07_mv2 3s cubic-bezier(.11,.75,.48,.94) infinite;
	background-color: rgba(174,213,129,0.75);
}
.cp_loading07 span:nth-child(3) {
	bottom: 0;
	left: 0;
	-webkit-animation: loading07_mv3 3s cubic-bezier(.11,.75,.48,.94) infinite;
	        animation: loading07_mv3 3s cubic-bezier(.11,.75,.48,.94) infinite;
	background-color: rgba(255,213,79,0.75);
}
.cp_loading07 span:nth-child(4) {
	bottom: 0;
	right: 0;
	-webkit-animation: loading07_mv4 3s cubic-bezier(.11,.75,.48,.94) infinite;
	        animation: loading07_mv4 3s cubic-bezier(.11,.75,.48,.94) infinite;
	background-color: rgba(240,98,146,0.75);
}
@-webkit-keyframes loading07_mv1 {
	0% {
		z-index: 10;
		-webkit-transform: translate(0);
		        transform: translate(0);
	}
	25% {
		-webkit-transform: translate(100%, 0);
		        transform: translate(100%, 0);
	}
	50% {
		-webkit-transform: translate(100%, 100%);
		        transform: translate(100%, 100%);
	}
	75% {
		z-index: 0;
		-webkit-transform: translate(0, 100%);
		        transform: translate(0, 100%);
	}
	100% {
		-webkit-transform: translate(0);
		        transform: translate(0);
	}
}
@keyframes loading07_mv1 {
	0% {
		z-index: 10;
		-webkit-transform: translate(0);
		        transform: translate(0);
	}
	25% {
		-webkit-transform: translate(100%, 0);
		        transform: translate(100%, 0);
	}
	50% {
		-webkit-transform: translate(100%, 100%);
		        transform: translate(100%, 100%);
	}
	75% {
		z-index: 0;
		-webkit-transform: translate(0, 100%);
		        transform: translate(0, 100%);
	}
	100% {
		-webkit-transform: translate(0);
		        transform: translate(0);
	}
}
@-webkit-keyframes loading07_mv2 {
	0% {
		-webkit-transform: translate(0);
		        transform: translate(0);
	}
	25% {
		-webkit-transform: translate(0, 100%);
		        transform: translate(0, 100%);
	}
	50% {
		z-index: 0;
		-webkit-transform: translate(-100%, 100%);
		        transform: translate(-100%, 100%);
	}
	75% {
		z-index: 10;
		-webkit-transform: translate(-100%, 0);
		        transform: translate(-100%, 0);
	}
	100% {
		-webkit-transform: translate(0);
		        transform: translate(0);
	}
}
@keyframes loading07_mv2 {
	0% {
		-webkit-transform: translate(0);
		        transform: translate(0);
	}
	25% {
		-webkit-transform: translate(0, 100%);
		        transform: translate(0, 100%);
	}
	50% {
		z-index: 0;
		-webkit-transform: translate(-100%, 100%);
		        transform: translate(-100%, 100%);
	}
	75% {
		z-index: 10;
		-webkit-transform: translate(-100%, 0);
		        transform: translate(-100%, 0);
	}
	100% {
		-webkit-transform: translate(0);
		        transform: translate(0);
	}
}
@-webkit-keyframes loading07_mv3 {
	0% {
		-webkit-transform: translate(0);
		        transform: translate(0);
	}
	25% {
		z-index: 10;
		-webkit-transform: translate(0, -100%);
		        transform: translate(0, -100%);
	}
	50% {
		-webkit-transform: translate(100%, -100%);
		        transform: translate(100%, -100%);
	}
	75% {
		-webkit-transform: translate(100%, 0);
		        transform: translate(100%, 0);
	}
	100% {
		z-index: 0;
		-webkit-transform: translate(0);
		        transform: translate(0);
	}
}
@keyframes loading07_mv3 {
	0% {
		-webkit-transform: translate(0);
		        transform: translate(0);
	}
	25% {
		z-index: 10;
		-webkit-transform: translate(0, -100%);
		        transform: translate(0, -100%);
	}
	50% {
		-webkit-transform: translate(100%, -100%);
		        transform: translate(100%, -100%);
	}
	75% {
		-webkit-transform: translate(100%, 0);
		        transform: translate(100%, 0);
	}
	100% {
		z-index: 0;
		-webkit-transform: translate(0);
		        transform: translate(0);
	}
}
@-webkit-keyframes loading07_mv4 {
	0% {
		-webkit-transform: translate(0);
		        transform: translate(0);
	}
	25% {
		z-index: 0;
		-webkit-transform: translate(-100%, 0);
		        transform: translate(-100%, 0);
	}
	50% {
		z-index: 10;
		-webkit-transform: translate(-100%, -100%);
		        transform: translate(-100%, -100%);
	}
	75% {
		-webkit-transform: translate(0, -100%);
		        transform: translate(0, -100%);
	}
	100% {
		-webkit-transform: translate(0);
		        transform: translate(0);
	}
}
@keyframes loading07_mv4 {
	0% {
		-webkit-transform: translate(0);
		        transform: translate(0);
	}
	25% {
		z-index: 0;
		-webkit-transform: translate(-100%, 0);
		        transform: translate(-100%, 0);
	}
	50% {
		z-index: 10;
		-webkit-transform: translate(-100%, -100%);
		        transform: translate(-100%, -100%);
	}
	75% {
		-webkit-transform: translate(0, -100%);
		        transform: translate(0, -100%);
	}
	100% {
		-webkit-transform: translate(0);
		        transform: translate(0);
	}
}

4つの丸が一つ一つ移動して消えていくローディング

ニャン易度 
<div class="cp_loading08">
	<div class="cp_item"></div>
</div>
.cp_loading08 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 35px;
	height: 35px;
	-webkit-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
}
.cp_loading08 .cp_item:not(:required) {
	display: inline-block;
	width: 4px;
	height: 4px;
	-webkit-transition: 0.3s all;
	        transition: 0.3s all;
	-webkit-transform: scale(1);
	        transform: scale(1);
	-webkit-animation: loading08 5s infinite cubic-bezier(.11,.75,.88,.44);
	        animation: loading08 5s infinite cubic-bezier(.11,.75,.88,.44);
	opacity: 1;
	border-radius: 100%;
	background: transparent;
	box-shadow: #f06292 -10px -10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
	filter: alpha(opacity=100);
}
.cp_loading08 .cp_item {
	-webkit-transform: scale(0);
	        transform: scale(0);
	opacity: 0;
	filter: alpha(opacity=0);
}
@-webkit-keyframes loading08 {
	0% {
		box-shadow: #f06292 -10px -10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
	}
	8.33% {
		box-shadow: #f06292 10px -10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
	}
	16.67% {
		box-shadow: #f06292 10px 10px 0 5px, #ffd54f 10px 10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
	}
	25% {
		box-shadow: #f06292 -10px 10px 0 5px, #ffd54f -10px 10px 0 5px, #aed581 -10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
	}
	33.33% {
		box-shadow: #f06292 -10px -10px 0 5px, #ffd54f -10px 10px 0 5px, #aed581 -10px -10px 0 5px, #4dd0e1 -10px -10px 0 5px;
	}
	41.67% {
		box-shadow: #f06292 10px -10px 0 5px, #ffd54f -10px 10px 0 5px, #aed581 -10px -10px 0 5px, #4dd0e1 10px -10px 0 5px;
	}
	50% {
		box-shadow: #f06292 10px 10px 0 5px, #ffd54f -10px 10px 0 5px, #aed581 -10px -10px 0 5px, #4dd0e1 10px -10px 0 5px;
	}
	58.33% {
		box-shadow: #f06292 -10px 10px 0 5px, #ffd54f -10px 10px 0 5px, #aed581 -10px -10px 0 5px, #4dd0e1 10px -10px 0 5px;
	}
	66.67% {
		box-shadow: #f06292 -10px -10px 0 5px, #ffd54f -10px -10px 0 5px, #aed581 -10px -10px 0 5px, #4dd0e1 10px -10px 0 5px;
	}
	75% {
		box-shadow: #f06292 10px -10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px -10px 0 5px, #4dd0e1 10px -10px 0 5px;
	}
	83.33% {
		box-shadow: #f06292 10px 10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 10px 10px 0 5px;
	}
	91.67% {
		box-shadow: #f06292 -10px 10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
	}
	100% {
		box-shadow: #f06292 -10px -10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
	}
}
@keyframes loading08 {
	0% {
		box-shadow: #f06292 -10px -10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
	}
	8.33% {
		box-shadow: #f06292 10px -10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
	}
	16.67% {
		box-shadow: #f06292 10px 10px 0 5px, #ffd54f 10px 10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
	}
	25% {
		box-shadow: #f06292 -10px 10px 0 5px, #ffd54f -10px 10px 0 5px, #aed581 -10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
	}
	33.33% {
		box-shadow: #f06292 -10px -10px 0 5px, #ffd54f -10px 10px 0 5px, #aed581 -10px -10px 0 5px, #4dd0e1 -10px -10px 0 5px;
	}
	41.67% {
		box-shadow: #f06292 10px -10px 0 5px, #ffd54f -10px 10px 0 5px, #aed581 -10px -10px 0 5px, #4dd0e1 10px -10px 0 5px;
	}
	50% {
		box-shadow: #f06292 10px 10px 0 5px, #ffd54f -10px 10px 0 5px, #aed581 -10px -10px 0 5px, #4dd0e1 10px -10px 0 5px;
	}
	58.33% {
		box-shadow: #f06292 -10px 10px 0 5px, #ffd54f -10px 10px 0 5px, #aed581 -10px -10px 0 5px, #4dd0e1 10px -10px 0 5px;
	}
	66.67% {
		box-shadow: #f06292 -10px -10px 0 5px, #ffd54f -10px -10px 0 5px, #aed581 -10px -10px 0 5px, #4dd0e1 10px -10px 0 5px;
	}
	75% {
		box-shadow: #f06292 10px -10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px -10px 0 5px, #4dd0e1 10px -10px 0 5px;
	}
	83.33% {
		box-shadow: #f06292 10px 10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 10px 10px 0 5px;
	}
	91.67% {
		box-shadow: #f06292 -10px 10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
	}
	100% {
		box-shadow: #f06292 -10px -10px 0 5px, #ffd54f 10px -10px 0 5px, #aed581 10px 10px 0 5px, #4dd0e1 -10px 10px 0 5px;
	}
}

ドットで作った円がぐるぐる回るローディング

ニャン易度 
<div class="cp_loading09"></div>
.cp_loading09 {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
}
.cp_loading09:not(:required):after {
	content: '';
	display: block;
	font-size: 10px;
	width: 1em;
	height: 1em;
	-webkit-animation: loading09 1500ms infinite cubic-bezier(.32,.17,.57,.9);
	        animation: loading09 1500ms infinite cubic-bezier(.32,.17,.57,.9);
	border-radius: 0.5em;
	box-shadow: #F8BBD0 1.5em 0 0 0,
	#D1C4E9 1.1em 1.1em 0 0,
	#BBDEFB 0 1.5em 0 0,
	#B2EBF2 -1.1em 1.1em 0 0,
	#C8E6C9 -1.5em 0 0 0,
	#F0F4C3 -1.1em -1.1em 0 0,
	#FFECB3 0 -1.5em 0 0,
	#FFCCBC 1.1em -1.1em 0 0;
}
@-webkit-keyframes loading09 {
	0% {
		-webkit-transform: rotate(0deg);
		        transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		        transform: rotate(360deg);
	}
}
@keyframes loading09 {
	0% {
		-webkit-transform: rotate(0deg);
		        transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		        transform: rotate(360deg);
	}
}

ドットで作った円が消えながらぐるぐる回るローディング

ニャン易度 
<div class="cp_loading10">
	<div class="cp_cont"><div class="cp_item"></div></div>
	<div class="cp_cont"><div class="cp_item"></div></div>
	<div class="cp_cont"><div class="cp_item"></div></div>
	<div class="cp_cont"><div class="cp_item"></div></div>
	<div class="cp_cont"><div class="cp_item"></div></div>
	<div class="cp_cont"><div class="cp_item"></div></div>
	<div class="cp_cont"><div class="cp_item"></div></div>
	<div class="cp_cont"><div class="cp_item"></div></div>
</div>
.cp_loading10 {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
}
.cp_loading10 .cp_cont {
	position: absolute;
	top: calc(50% - 10px/2);
	left: calc(50% - 10px/2);
	-webkit-transform-origin: -150% 50%;
	transform-origin: -150% 50%;
}
.cp_loading10 .cp_cont .cp_item {
	width: 10px;
	height: 10px;
	-webkit-animation: loading10 2s infinite cubic-bezier(.16,.69,.85,.54);
	        animation: loading10 2s infinite cubic-bezier(.16,.69,.85,.54);
	-webkit-animation-delay: inherit;
	        animation-delay: inherit;
	border-radius: 50%;
	background: #ab47bc;
}
.cp_loading10 .cp_cont:nth-of-type(0n+1) {
	-webkit-transform: translateX(200%) rotate(-90deg);
	transform: translateX(200%) rotate(-90deg);
	-webkit-animation-delay: -1.5s;
	animation-delay: -1.5s;
}
.cp_loading10 .cp_cont:nth-of-type(0n+2) {
	-webkit-transform: translateX(200%) rotate(-45deg);
	transform: translateX(200%) rotate(-45deg);
	-webkit-animation-delay: -1.375s;
	animation-delay: -1.375s;
}
.cp_loading10 .cp_cont:nth-of-type(0n+3) {
	-webkit-transform: translateX(200%);
	transform: translateX(200%);
	-webkit-animation-delay: -1.25s;
	animation-delay: -1.25s;
}
.cp_loading10 .cp_cont:nth-of-type(0n+4) {
	-webkit-transform: translateX(200%) rotate(45deg);
	transform: translateX(200%) rotate(45deg);
	-webkit-animation-delay: -1.125s;
	animation-delay: -1.125s;
}
.cp_loading10 .cp_cont:nth-of-type(0n+5) {
	-webkit-transform: translateX(200%) rotate(90deg);
	transform: translateX(200%) rotate(90deg);
	-webkit-animation-delay: -1s;
	animation-delay: -1s;
}
.cp_loading10 .cp_cont:nth-of-type(0n+6) {
	-webkit-transform: translateX(200%) rotate(135deg);
	transform: translateX(200%) rotate(135deg);
	-webkit-animation-delay: -0.875s;
	animation-delay: -0.875s;
}
.cp_loading10 .cp_cont:nth-of-type(0n+7) {
	-webkit-transform: translateX(200%) rotate(180deg);
	transform: translateX(200%) rotate(180deg);
	-webkit-animation-delay: -0.75s;
	animation-delay: -0.75s;
}
.cp_loading10 .cp_cont:nth-of-type(0n+8) {
	-webkit-transform: translateX(200%) rotate(225deg);
	transform: translateX(200%) rotate(225deg);
	-webkit-animation-delay: -0.625s;
	animation-delay: -0.625s;
}
@keyframes loading10 {
	0%, 100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	}
	50% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

ドットで作った円がちょっとずれながらぐるぐる回るローディング

ニャン易度 
<div class="cp_loading11">
	<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>
.cp_loading11 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	-webkit-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
}
.cp_loading11 .cp_item {
	position: absolute;
	width: 50px;
	height: 50px;
	-webkit-transform: rotate(225deg);
	        transform: rotate(225deg);
	-webkit-animation: loading11 5.5s infinite;
	        animation: loading11 5.5s infinite;
	opacity: 0;
}
.cp_loading11 .cp_item:after {
	position: absolute;
	width: 10px;
	height: 10px;
	content: '';
	border-radius: 10px;
	background: #00bcd4;
}
.cp_loading11 .cp_item:nth-child(2) {
	-webkit-animation-delay: 240ms;
	        animation-delay: 240ms;
}
.cp_loading11 .cp_item:nth-child(3) {
	-webkit-animation-delay: 480ms;
	        animation-delay: 480ms;
}
.cp_loading11 .cp_item:nth-child(4) {
	-webkit-animation-delay: 720ms;
	        animation-delay: 720ms;
}
.cp_loading11 .cp_item:nth-child(5) {
	-webkit-animation-delay: 960ms;
	        animation-delay: 960ms;
}
@-webkit-keyframes loading11 {
	0% {
		-webkit-transform: rotate(225deg);
		        transform: rotate(225deg);
		-webkit-animation-timing-function: ease-out;
		        animation-timing-function: ease-out;
		opacity: 1;
	}
	7% {
		-webkit-transform: rotate(345deg);
		        transform: rotate(345deg);
		-webkit-animation-timing-function: linear;
		        animation-timing-function: linear;
	}
	30% {
		-webkit-transform: rotate(455deg);
		        transform: rotate(455deg);
		-webkit-animation-timing-function: ease-in-out;
		        animation-timing-function: ease-in-out;
	}
	39% {
		-webkit-transform: rotate(690deg);
		        transform: rotate(690deg);
		-webkit-animation-timing-function: linear;
		        animation-timing-function: linear;
	}
	70% {
		-webkit-transform: rotate(815deg);
		        transform: rotate(815deg);
		-webkit-animation-timing-function: ease-out;
		        animation-timing-function: ease-out;
		opacity: 1;
	}
	75% {
		-webkit-transform: rotate(945deg);
		        transform: rotate(945deg);
		-webkit-animation-timing-function: ease-out;
		        animation-timing-function: ease-out;
	}
	76% {
		-webkit-transform: rotate(945deg);
		        transform: rotate(945deg);
		opacity: 0;
	}
	100% {
		-webkit-transform: rotate(945deg);
		        transform: rotate(945deg);
		opacity: 0;
	}
}
@keyframes loading11 {
	0% {
		-webkit-transform: rotate(225deg);
		        transform: rotate(225deg);
		-webkit-animation-timing-function: ease-out;
		        animation-timing-function: ease-out;
		opacity: 1;
	}
	7% {
		-webkit-transform: rotate(345deg);
		        transform: rotate(345deg);
		-webkit-animation-timing-function: linear;
		        animation-timing-function: linear;
	}
	30% {
		-webkit-transform: rotate(455deg);
		        transform: rotate(455deg);
		-webkit-animation-timing-function: ease-in-out;
		        animation-timing-function: ease-in-out;
	}
	39% {
		-webkit-transform: rotate(690deg);
		        transform: rotate(690deg);
		-webkit-animation-timing-function: linear;
		        animation-timing-function: linear;
	}
	70% {
		-webkit-transform: rotate(815deg);
		        transform: rotate(815deg);
		-webkit-animation-timing-function: ease-out;
		        animation-timing-function: ease-out;
		opacity: 1;
	}
	75% {
		-webkit-transform: rotate(945deg);
		        transform: rotate(945deg);
		-webkit-animation-timing-function: ease-out;
		        animation-timing-function: ease-out;
	}
	76% {
		-webkit-transform: rotate(945deg);
		        transform: rotate(945deg);
		opacity: 0;
	}
	100% {
		-webkit-transform: rotate(945deg);
		        transform: rotate(945deg);
		opacity: 0;
	}
}

横に並んだドットが一つずつ弾んでいくローディング

ニャン易度 
<div class="cp_loading12">
	<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>
.cp_loading12 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80px;
	-webkit-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
}
.cp_loading12 .cp_item {
	display: inline-block;
	width: 8px;
	height: 8px;
	-webkit-animation: loading12 1.8s infinite cubic-bezier(.51,.35,.71,.55);
	        animation: loading12 1.8s infinite cubic-bezier(.51,.35,.71,.55);
	opacity: 0.3;
	border-radius: 50%;
}
.cp_loading12 .cp_item:nth-child(1) {
	background: #E91E63;
}
.cp_loading12 .cp_item:nth-child(2) {
	-webkit-animation-delay: 0.2s;
	        animation-delay: 0.2s;
	background: #E91E63;
}
.cp_loading12 .cp_item:nth-child(3) {
	-webkit-animation-delay: 0.4s;
	        animation-delay: 0.4s;
	background: #673AB7;
}
.cp_loading12 .cp_item:nth-child(4) {
	-webkit-animation-delay: 0.6s;
	        animation-delay: 0.6s;
	background: #03A9F4;
}
.cp_loading12 .cp_item:nth-child(5) {
	-webkit-animation-delay: 0.8s;
	        animation-delay: 0.8s;
	background: #4CAF50;
}
@-webkit-keyframes loading12 {
	0% {
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
	}
	35% {
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
		opacity: 0.3;
		filter: alpha(opacity=30);
	}
	50% {
		-webkit-transform: translateY(-20px);
		        transform: translateY(-20px);
		opacity: 0.8;
		filter: alpha(opacity=80);
	}
	70% {
		-webkit-transform: translateY(3px);
		        transform: translateY(3px);
		opacity: 0.8;
		filter: alpha(opacity=80);
	}
	85% {
		-webkit-transform: translateY(-3px);
		        transform: translateY(-3px);
	}
}
@keyframes loading12 {
	0% {
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
	}
	35% {
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
		opacity: 0.3;
		filter: alpha(opacity=30);
	}
	50% {
		-webkit-transform: translateY(-20px);
		        transform: translateY(-20px);
		opacity: 0.8;
		filter: alpha(opacity=80);
	}
	70% {
		-webkit-transform: translateY(3px);
		        transform: translateY(3px);
		opacity: 0.8;
		filter: alpha(opacity=80);
	}
	85% {
		-webkit-transform: translateY(-3px);
		        transform: translateY(-3px);
	}
}

横に並んだドットが左から右に集まって消えるローディング

ニャン易度 
<div class="cp_loading13">
	<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 class="cp_item"></div>
	<div class="cp_item"></div>
	<div class="cp_item"></div>
</div>
.cp_loading13 {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
}
.cp_loading13 .cp_item {
	display: inline-block;
	width: 10px;
	height: 10px;
	-webkit-transform: translateX(-400px);
	        transform: translateX(-400px);
	-webkit-animation: loading13 6s infinite;
	        animation: loading13 6s infinite;
	opacity: 0;
	border-radius: 50%;
}
.cp_loading13 .cp_item:nth-child(1) {
	-webkit-animation-delay: .8s;
	        animation-delay: .8s;
	background: #EC407A;
}
.cp_loading13 .cp_item:nth-child(2) {
	-webkit-animation-delay: .7s;
	        animation-delay: .7s;
	background: #AB47BC;
}
.cp_loading13 .cp_item:nth-child(3) {
	-webkit-animation-delay: .6s;
	        animation-delay: .6s;
	background: #7E57C2;
}
.cp_loading13 .cp_item:nth-child(4) {
	-webkit-animation-delay: .5s;
	        animation-delay: .5s;
	background: #5C6BC0;
}
.cp_loading13 .cp_item:nth-child(5) {
	-webkit-animation-delay: .4s;
	        animation-delay: .4s;
	background: #42A5F5;
}
.cp_loading13 .cp_item:nth-child(6) {
	-webkit-animation-delay: .3s;
	        animation-delay: .3s;
	background: #29B6F6;
}
.cp_loading13 .cp_item:nth-child(7) {
	-webkit-animation-delay: .2s;
	        animation-delay: .2s;
	background: #26C6DA;
}
.cp_loading13 .cp_item:nth-child(8) {
	-webkit-animation-delay: .1s;
	        animation-delay: .1s;
	background: #26A69A;
}
@keyframes loading13 {
	40% {
		-webkit-transform: translateX(0px);
		        transform: translateX(0px);
		opacity: 0.8;
	}
	100% {
		-webkit-transform: translateX(400px);
		        transform: translateX(400px);
		opacity: 0;
	}
}

横に並んだドットが上下にふわふわ揺れるローディング

ニャン易度 
<div class="cp_loading14">
	<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>
.cp_loading14 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.cp_loading14 .cp_item {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 15px 5px;
	border-radius: 50px;
}
.cp_loading14 .cp_item:nth-child(1) {
	-webkit-animation: loading14_up 1s infinite cubic-bezier(.64,.1,.64,.9);
	        animation: loading14_up 1s infinite cubic-bezier(.64,.1,.64,.9);
	background: #f48fb1;
}
.cp_loading14 .cp_item:nth-child(2) {
	-webkit-animation: loading14_down 1s infinite cubic-bezier(.64,.1,.64,.9);
	        animation: loading14_down 1s infinite cubic-bezier(.64,.1,.64,.9);
	background: #b39ddb;
}
.cp_loading14 .cp_item:nth-child(3) {
	-webkit-animation: loading14_up 1s infinite cubic-bezier(.64,.1,.64,.9);
	        animation: loading14_up 1s infinite cubic-bezier(.64,.1,.64,.9);
	background: #90caf9;
}
.cp_loading14 .cp_item:nth-child(4) {
	-webkit-animation: loading14_down 1s infinite cubic-bezier(.64,.1,.64,.9);
	        animation: loading14_down 1s infinite cubic-bezier(.64,.1,.64,.9);
	background: #80deea;
}
.cp_loading14 .cp_item:nth-child(5) {
	-webkit-animation: loading14_up 1s infinite cubic-bezier(.64,.1,.64,.9);
	        animation: loading14_up 1s infinite cubic-bezier(.64,.1,.64,.9);
	background: #a5d6a7;
}
@-webkit-keyframes loading14_up {
	0% {
		-webkit-transform: translateY(-15px);
		        transform: translateY(-15px);
	}
	50% {
		-webkit-transform: translateY(15px);
		        transform: translateY(15px);
	}
	100% {
		-webkit-transform: translateY(-15px);
		        transform: translateY(-15px);
	}
}
@-webkit-keyframes loading14_down {
	0% {
		-webkit-transform: translateY(15px);
		        transform: translateY(15px);
	}
	50% {
		-webkit-transform: translateY(-15px);
		        transform: translateY(-15px);
	}
	100% {
		-webkit-transform: translateY(15px);
		        transform: translateY(15px);
	}
}
@keyframes loading14_up {
	0% {
		-webkit-transform: translateY(-15px);
		        transform: translateY(-15px);
	}
	50% {
		-webkit-transform: translateY(15px);
		        transform: translateY(15px);
	}
	100% {
		-webkit-transform: translateY(-15px);
		        transform: translateY(-15px);
	}
}
@keyframes loading14_down {
	0% {
		-webkit-transform: translateY(15px);
		        transform: translateY(15px);
	}
	50% {
		-webkit-transform: translateY(-15px);
		        transform: translateY(-15px);
	}
	100% {
		-webkit-transform: translateY(15px);
		        transform: translateY(15px);
	}
}

縦に並んだドットが左右にふわふわ揺れるローディング

ニャン易度 
<div class="cp_loading15">
	<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>
.cp_loading15 {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
}
.cp_loading15 .cp_item {
	width: 15px;
	height: 15px;
	margin: 15px auto;
	border-radius: 50px;
}
.cp_loading15 .cp_item:nth-child(1) {
	-webkit-animation: loading15_right 1s infinite cubic-bezier(.64,.1,.64,.9);
	        animation: loading15_right 1s infinite cubic-bezier(.64,.1,.64,.9);
	background: #26A69A;
}
.cp_loading15 .cp_item:nth-child(2) {
	-webkit-animation: loading15_left 1.1s infinite cubic-bezier(.64,.1,.64,.9);
	        animation: loading15_left 1.1s infinite cubic-bezier(.64,.1,.64,.9);
	background: #9CCC65;
}
.cp_loading15 .cp_item:nth-child(3) {
	-webkit-animation: loading15_right 1.05s infinite cubic-bezier(.64,.1,.64,.9);
	        animation: loading15_right 1.05s infinite cubic-bezier(.64,.1,.64,.9);
	background: #FFEE58;
}
.cp_loading15 .cp_item:nth-child(4) {
	-webkit-animation: loading15_left 1.15s infinite cubic-bezier(.64,.1,.64,.9);
	        animation: loading15_left 1.15s infinite cubic-bezier(.64,.1,.64,.9);
	background: #FFA726;
}
.cp_loading15 .cp_item:nth-child(5) {
	-webkit-animation: loading15_right 1.1s infinite cubic-bezier(.64,.1,.64,.9);
	        animation: loading15_right 1.1s infinite cubic-bezier(.64,.1,.64,.9);
	background: #ef5350;
}
@-webkit-keyframes loading15_right {
	0% {
		-webkit-transform: translate(-15px);
		        transform: translate(-15px);
	}
	50% {
		-webkit-transform: translate(15px);
		        transform: translate(15px);
	}
	100% {
		-webkit-transform: translate(-15px);
		        transform: translate(-15px);
	}
}
@-webkit-keyframes loading15_left {
	0% {
		-webkit-transform: translate(15px);
		        transform: translate(15px);
	}
	50% {
		-webkit-transform: translate(-15px);
		        transform: translate(-15px);
	}
	100% {
		-webkit-transform: translate(15px);
		        transform: translate(15px);
	}
}
@keyframes loading15_right {
	0% {
		-webkit-transform: translate(-15px);
		        transform: translate(-15px);
	}
	50% {
		-webkit-transform: translate(15px);
		        transform: translate(15px);
	}
	100% {
		-webkit-transform: translate(-15px);
		        transform: translate(-15px);
	}
}
@keyframes loading15_left {
	0% {
		-webkit-transform: translate(15px);
		        transform: translate(15px);
	}
	50% {
		-webkit-transform: translate(-15px);
		        transform: translate(-15px);
	}
	100% {
		-webkit-transform: translate(15px);
		        transform: translate(15px);
	}
}

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

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

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