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

投稿日 2017 年 4 月 tenman

HTML

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

1	<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);
}
}

.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 だけのロード画面

投稿グループ未分類

« table 要素と画像オーバーフロー CSSだけで行うサイドバーの追従 »

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