CSS だけで作るローディング画像⑦ - TYPE5【みんなの知識ちょっと便利帳】

MicroAd Compass Wipe_Banner - PC/SP-header部、PC/SP-body部セットで設置 - 外部HTML

CSS だけで作るローディング画像 ⑦
= Type 5 =
= 画像ファイルを用意する必要がありません =

フリーで使えるローディング画像 -《総目次》

ローディング画像のご利用について

CSS ⑦	《1》《2》《3》《4》《5》《6》《7》《8》
スピードサイズ人気度透過処理 SVG WebFont CSS① CSS② CSS③ CSS④ CSS⑤ CSS⑥ CSS⑦

画像や JavaScript を使わずに、CSS だけでシンプルにローディングアニメーションを表示させる方法です。
HTML ソースと、CSS ソースをページ内に表示しましたので、コピーしてお使いください。
色を変えることができます。CSS の「 color:」や「border」などの部分を、ボディカラーなどに合わせて適切な色を設定してください。
＊カラーサンプルはこちらが便利です。
DW で表示されるカラーネーム
大きさを変えることもできます。CSS の「width:」と「 height:」が基本ですが、複雑なタイプもありますので工夫をしてください。

《 Type 5 》

「お待ちくだされ...」の文字は、「LOADING...」など任意の文字を表示させることができます。また、文字を表示させないこともできます。

「<p class='loading-text'>お待ちくだされ...</p>」の部分を別の文字にするか、この部分を全て削除するかしてください。

お待ちくだされ...

■ HTML ソース Copy HTMLソース

<div class='loading-page'><div class="loading-wrap"><div class="loading-card"><div class='ball'></div><div class='loading-board board1'></div><div class='loading-board board2'></div><div class='loading-board board3'></div></div><p class='loading-text'>お待ちくだされ...</p></div></div>

■ CSS ソース Copy CSSソース

{
			padding: 0;
			margin: 0;
		}
		.loading-page {
			width: 100%;
			height: 100%;
		}
		.loading-page {
		padding: 30px 0 0;
			display: table;
			background-color: rgb(255, 90, 95);
		}
		.loading-wrap {
			display: table-cell;
			vertical-align: middle;
			text-align: center;
		}
		.loading-card {
			width: 200px;
			height: 240px;
			border-radius: 10px;
			margin: auto;
			background-color: white;
			position: relative;
      box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, 0.15);
		}
		.loading-board {
			width: 52px;
			height: 4px;
			position: absolute;
			background-color: rgb(255, 90, 95);
			border-radius: 4px;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			animation: loadingBoard 3s linear both infinite;
		}
		.loading-board.board2 {
			opacity: 0;
			transform: translate(-50%,-50%);
			animation-delay: 1s;
		}
		.loading-board.board3 {
			opacity: 0;
			transform: translate(-50%,-50%);
			animation-delay: 2s;
		}
		.ball {
			width: 14px;
			height: 14px;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -10px;
			margin-top: -10px;
			border-radius: 50%;
			background-color: rgb(255, 90, 95);
			opacity: 0;
			animation: jumpingBall 1s 1s forwards cubic-bezier(.87,.04,.26,.95) infinite;
		}
		.loading-text {
			color: white;
			padding-top: 10px;
			padding-bottom: 20px;
			width: 100%;
			text-align: center;
		}
		@keyframes loadingBoard {
			0% {
				transform: translate(100%, -1500%);
				opacity: 0;
			}
			50% {
				opacity: 1;
			}
			100% {
				transform: translate(-200%, 1500%);
				opacity: 0;
			}
		}
		@-webkit-keyframes loadingBoard {
			0% {
				transform: translate(100%, -900%);
			}
			100% {
				transform: translate(-100%, 900%);
			}
		}
		@keyframes jumpingBall {
			0% {
				transform: translate(0, -50px) scaleX(1);
				opacity: 1;
			}
			49% {
				transform: translate(0, -2px) scaleX(1.05);
			}
			100% {
				transform: translate(0, -50px);
				opacity: 1;
			}
		}

■ CodePenで表示

スポンサーリンク

フリーで使えるローディング画像 -《総目次》

ローディング画像のご利用について

スピード

サイズ

人気度

《1 背景：白／画像：黒》

《2 背景：黒／画像：白》

《3 背景：グレー／画像：黒》

《4 背景：グレー／画像：赤》

《5 背景：白／画像：赤》

《6 背景：黒／画像：赤》

《7 背景：白／画像：オレンジ》

《8 背景：白／画像：グリーン》

透過処理

《3 - 星座記号》

SVG画像

透過処理済みSVGローダー（サイズ変更は幅の設定のみ）

Web Font

Webフォントで作るローディング画像

CSS ①

CSS ②

CSS ③

CSS ④

CSS ⑤

CSS ⑥

CSS ⑦

おすすめサイト・関連サイト…

スポンサーリンク

Last updated : 2024/06/30

Copied !

Click to Copy