コピペで使える筈のローディングアニメーションが表示されない

https://projects.lukehaas.me/css-loaders/
↑これが表示されません。皆さん使えます？？
もともとはvueのコンポーネントに記述したんですが表示されなくて、
html,cssに記述してもダメでした。探しても同じ症状のヒトはいないようで。

■index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="./loading.css">
</head>
<body>
	<div class="loader">Loading...</div>
</body>
</html>

■loading.css

.loader,
.loader:before,
.loader:after {
	background: #ffffff;
	-webkit-animation: load1 1s infinite ease-in-out;
	animation: load1 1s infinite ease-in-out;
	width: 1em;
	height: 4em;
}
.loader {
	color: #ffffff;
	text-indent: -9999em;
	margin: 88px auto;
	position: relative;
	font-size: 11px;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}
.loader:before,
.loader:after {
	position: absolute;
	top: 0;
	content: '';
}
.loader:before {
	left: -1.5em;
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
.loader:after {
	left: 1.5em;
}
@-webkit-keyframes load1 {
	0%,
	80%,
	100% {
		box-shadow: 0 0;
		height: 4em;
	}
	40% {
		box-shadow: 0 -2em;
		height: 5em;
	}
}
@keyframes load1 {
	0%,
	80%,
	100% {
		box-shadow: 0 0;
		height: 4em;
	}
  	40% {
		box-shadow: 0 -2em;
		height: 5em;
	}
}

行動規範の内容に同意します

回答2件

白背景でなければ使えます。（白背景でも色指定すればよいが）

CSS
1body {
2    background: #ccc;
3}
4```**動くサンプル：**[https://jsfiddle.net/1exokb9a/](https://jsfiddle.net/1exokb9a/)

投稿2020/05/25 02:37

kei344

総合スコア69606

これが表示されません。皆さん使えます？？

表示されました。背景を暗めにしてみては？

投稿2020/05/25 02:39

Lhankor_Mhy

総合スコア36960

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

コピペで使える筈のローディングアニメーションが表示されない

関連した質問