コニファ・ロゴ

csstest:画像を使わず、javascriptとCSSで送信中のスピナー付きSubmitボタン

Submitボタンをクリックすると、送信中を示すスピナータイプのアクティビティ・インジケーターを表示してくれます。進捗を示すプログレスバー付きのものもあります。画像は不使用で、javascriptとCSSで実装しています。

最近の新しいブラウザはCSS3の対応が進んできたので、ベンダープレフィックスを使わないケースが増えてきました。そのため、古いブラウザでは、CSS3の指定がうまく動作しないことがあります。例えば、このサンプルで「収縮」はクリックすると、小さなグレーの円の中でスピナーが回りますが、古いサファリなどでは、円にならず四角のままで動作します。

左にスピナー

右にスピナー

上ににスピナー

下にスピナー

収縮

収縮とオーバーレイ

ズームイン

ズームアウト

プログレスバー付きスピナー(右側)

SSサイズ

Sサイズ

Mサイズ


Lサイズ

LLサイズ

 

 

 

戻るボタン