今回はロードなどをしているときに出てくるあのぐるぐる(伝われ)を作っていこうと思います。

早速完成品

こんな感じのものを作ります。

作り方

1/4のborderの付いた円をつくり、それを回転させることでロード中のぐるぐるを作っています。
1/4のborder付きの円の作り方は以前の記事を参考にしてください。

pocopota-blog.hatenablog.com

コード解説

<div id="circle"></div>
#circle {
    width: 18px;
    height: 18px;
    overflow: hidden;
    animation: circleAni 1.3s linear infinite;
    transform-origin: 100% 100%;
}
#circle:before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: solid #4a90e2 6px;
}
@keyframes circleAni {
    0% {
        transform: rotate(0deg);
    }

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

こんな感じです。前回の記事に回転させるアニメーションのcssが追加されています。
以下のコードが追加された部分です。

#circle{
            animation: circleAni 1.3s linear infinite;
            transform-origin: 100% 100%;
        }
@keyframes circleAni {
            0% {
                transform: rotate(0deg);
            }
    
            100% {
                transform: rotate(360deg);
            }
        }

いたって普通の回転のcssですが一つ気をつけないといけないところがあります。
普通に回転させると下のようになります。

そのままの回転だと回転の中心がずれています。
なのでtransform-origin: 100% 100%;を追加して右下を中心として回転させています。

終わり!

これでロード中のぐるぐるは完成しました。

ちなみにこのコードはMy reCAPTCHAという筆者の開発したサービスに使われていますのでそちらも是非見てみてください。
My reCAPTCHAは自分の好きな画像でGoogleのreCAPTCHA風なものが作れます。実際にサイトで使うこともできます。
f:id:pocopota:20210906071333p:plain

github.com