CSSのみで実装された５００種類のローディングアニメーション「CSS Loaders」:phpspot開発日誌

2023/09/20 6 users CSS phpspot開発日誌 たくさん 500種類

CSS Loaders: A collection of more than 500 loading animations CSSのみで実装された５００種類のローディングアニメーション「CSS Loaders」 3Dやフラットなものなど、実にたくさんのローディングアニメーションがあってみるだけでも楽しい。 続きを読む

Tailwind CSSでお手軽ローディングアニメーション

2021/11/14 7 users コピペ クオリティ サンプルコード Tailwind CSS

Talewind CSSでローディング・アニメーションを表示したくなったのですが、ググってもちょうど良いサンプルが見つかりませんでした。 というわけでコピペで簡単に使えるサンプルコードをいくつか考えてみました。あまりクオリティが高いものではないですが「Tailwind CSSでとりあえず何かローディング中っぽい表示にした... 続きを読む

CSSとJavaScriptでWebページにローディングアニメーションを表示させる方法 | Webクリエイターボックス

2020/01/23 22 users CSS Webクリエイターボックス ユーザー 読込中 画面

2020年1月23日 CSS, JavaScript ページやコンテンツの読込中、何も表示されない真っ白な画面が延々と続くと、なんだか不安になりますよね。本当にこのページであってるのか…今何を待ってたんだっけ…なんて。ユーザーを不安にさせないためにも、読込中だと認識できるローディングアニメーションを取り入れてみるといいで... 続きを読む

ページ読み込み中。ローディングアニメーションを入れてみよう。 | LittleThings

2019/10/29 19 users スペック 要因 LittleThings Webサーバ コード

たくさんの情報を発信しているサイト。 せっかく更新した記事も、ページの表示速度が遅いと見ている側はストレスに。 表示の遅いサイトは、それだけでユーザーが離れて行ってしまうことも・・ 表示速度が遅くなる要因は複雑です。 表示させる画像のサイズや量、jsなどコードの問題だけでなく、WEBサーバのスペックの問題... 続きを読む

ユーザーを飽きさせないためのローディングアニメーションの10選 | UX MILK

2019/02/07 33 users UX MILK ユーザー 10選

システムのステータスを視覚化することは、UIデザインの指針の中でも最も重要なものの１つです。 良いインタラクションデザインはフィードバックを与える アプリやWebサイトから即座に反応があれば１番良いですが、読み込みが遅いときもあります。反応が遅いのは、インターネットの接続が悪いせいかもしれませんし、オペ... 続きを読む

簡単で便利なのが揃ってる！CSSで実装されたローディング・スピナーのアニメーションのまとめ | コリス

2019/01/17 66 users ローディング コリス class CSS アニメーション

シンプルなローディングのアニメーションから、複雑で楽しいローディングのアニメーションまで、CSSで実装されたローディングアニメーションを紹介します。 ほとんどが外部ファイルとclassを加えるだけの簡単実装で、いざという...記事の続きを読む 続きを読む

ユニークなタイプが多数！Pure CSSで実装できるプリローダー 5 | NxWorld

2015/04/18 47 users プリローダー NxWorld SVG 備忘録 CSS

以前にもCSSやSVGなどで実装するプリローダー（ローディングアニメーション）を一度まとめたことがあるんですが、また幾つか使わせてもらう機会ありそうなものや覚えておきたいものが幾つかあったので備忘録です。今回はいずれもPure CSSで実装したプリローダーとなっており、シンプルでどんなデザインにも合うタイプももちろんありますが、全体的にちょっと変わったものなど他では見ないようなタイプのものが多めで... 続きを読む

CSSで14種のローディングアニメーションが実現できる「waitMe」:phpspot開発日誌

2015/04/14 53 users CSS phpspot開発日誌 アニメーション 実装 テキスト

CSSで14種のローディングアニメーションが実現できる「waitMe」 2015年04月14日- waitMe CSSで14種のローディングアニメーションが実現できる「waitMe」。 次のようにフォーム送信時等にアニメーションを14種の中から選んで実装可能 呼び出しコードは以下のようにカスタマイズ性があるけど簡単。サイズや色など、テキストが自由にかえられて、どんなサイトでも使えそう 関連エントリ... 続きを読む

CSSのみで作られたローディングアニメーションのセット・「Loaders.css」 - かちびと.net

2015/04/10 49 users CSS net セット

Web制作の話題を中心に、便利なWebサービスやリソースなどを紹介 Kudos for About This Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。 Kachibito.net is a community-based ... 続きを読む

CSSとテキストで作るローディングアニメーション・「Animated Type Loader」 - かちびと.net

2015/03/05 21 users CSS keyframes span net テキスト

Animated Type Loader Animated Type Loaderはテキストで作られたローディングを実装する為のCSSです。keyframesと:nth-of-typeを使ってspanでラップしたテキストを順番に表示させる、というシンプルなもの。テキストのみなのでマークアップやテキストの変更、CSSによる装飾など、管理が楽で良いですね。探せばゴロゴロとチュートリアルや紹介記事が出る... 続きを読む

ページ全体の読み込みアニメーションが簡単実現「jqueryIntroLoader」:phpspot開発日誌

2015/03/03 31 users GitHub jQueryプラグイン アニメーション 実現

ページ全体の読み込みアニメーションが簡単実現「jqueryIntroLoader」 2015年03月03日- Gix075/jqueryIntroLoader GitHub ページ全体の読み込みアニメーションが簡単実現「jqueryIntroLoader」。 ページ全体が読まれるまで、ローディングアニメーションを表示させるjQueryプラグインです。 アプリなどではページ全体を読み終えるまでローデ... 続きを読む

ASCII.jp：おしゃれなローディングアニメでイライラ解消 fakeLoader.js｜こうめの“これから使える”jQueryプラグイン

2015/02/06 47 users jQueryプラグイン フェイク ローディングアイコン 圧縮

今回紹介するプラグイン fakeLoader.js 「fakeLoader.js」は、ページの読み込みなどの際にフルスクリーンのローディングアニメーションを表示するjQueryプラグインです。 あくまでも「フェイク」なので読み込みが終わったかどうかは判断できませんが、デフォルトで用意されたオシャレなローディングアイコンを手軽に表示でき、オリジナルの画像や背景色も選択できます。設置方法が明快で、圧縮... 続きを読む

ボタンに直接ローディングアニメーションを付けられる「Ladda」:phpspot開発日誌

2013/06/18 34 users Ladda プログレスバー phpspot開発日誌 円形 背景

ボタンに直接ローディングアニメーションを付けられる「Ladda」 2013年06月18日- Ladda ボタンに直接ローディングアニメーションを付けられる「Ladda」。 ボタンを押すとボタンに回転するアニメーションが付与され、そのまま結果をまつ、というような分かりやすいUIが実現可能です 文字＋ボタンを円形のボタンにして背景をグレーにしたり、そのボタン自体をプログレスバーにしてしまうなど、面白い... 続きを読む