ローディングアイコン CSSだけ16行

HTML

<div class="loading"></div>

CSS

.loading {
 width: 60px;
 height: 60px;
 border: 5px solid rgba(200,200,200,0.4);
 border-top-color: rgba(200,200,200,0.9);
 border-radius: 50%;
 animation: spin 1.2s linear 0s infinite;
}
@keyframes spin {
 0% {
 transform: rotate(0deg);
}
100% {
 transform: rotate(360deg);
}
}

ネタ元:css だけのロード画面


新着記事

コメントは受け付けていません。