Single Element CSS Spinners
.load1 .loader, .load1 .loader:before, .load1 .loader:after { background: #ffffff; -webkit-animation: load1 1s infinite ease-in-out; animation: load1 1s infinite ease-in-out; width: 1em; height: 4em; } .load1 .loader { color: #ffffff; text-indent: -9999em; margin: 88px auto; position: relative; font-size: 11px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0
SpinKit
.spinner { width: 40px; height: 40px; background-color: #333; margin: 100px auto; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg
バリエーションも豊富、アニメーションでくるくる回るローダーを簡単に作成できるオンラインサービス -CanvasLoader Creator
CanvasLoader Creator [ad#ad-2] CanvasLoader Creatorの使い方は簡単で、右側の「Customizer」の値を変更するだけで、さまざまなタイプのローダーを作成できます。 キャプチャだと分かりにくいので、少し大きめにしていくつか作成してみました。 形状：Rounded Rectangle、Scaling：True 生成したローダーは「Download」ボタンをクリックすると、HTMLファイルをダウンロードできます。 「形状：Circle、Scaling：True」のコードは下記のようになります。 HTML L.9の「heartcode-canvasloader-min.js」とL.26-34のスクリプトがローダーの箇所になります。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loaders.css
