CSSだけでロード中のぐるぐるを作る
ブログが移転しました。自動的にリダイレクトします
今回はロードなどをしているときに出てくるあのぐるぐる(伝われ)を作っていこうと思います。
早速完成品
こんな感じのものを作ります。
作り方
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風なものが作れます。実際にサイトで使うこともできます。