今回はロードなどをしているときに出てくるあのぐるぐる（伝われ）を作っていこうと思います。
早速完成品
こんな感じのものを作ります。
作り方
1/4のborderの付いた円をつくり、それを回転させることでロード中のぐるぐるを作っています。
1/4のborder付きの円の作り方は以前の記事を参考にしてください。
コード解説
<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風なものが作れます。実際にサイトで使うこともできます。