CSSでローディングアイコンを作った

こんな感じに回転するローダーアイコンを作ってみました。

 

HTMLは単純にDIV要素を設置します。

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

 

あとはCSSのみです。輪っかはborderで作ってborder-radiusで円形にしました。それを回転させています。

ｄ

.loading{
    width: 100px;
    height: 100px;
    border-top: 25px solid #55f;
    border-right: 25px solid #bbf;
    border-bottom: 25px solid #55f;
    border-left: 25px solid #bbf;
    border-radius: 50%;
    animation: rotation 1s infinite linear;
}

@keyframes rotation{
    100%{
        transform: rotate(360deg);
    }
}
 

 

 

 - HTML/JavaScript