プログラミング

プログラミング

PR

読み込み中の画面を少しでも楽しくしよう!印象的なCSSローディング・アニメーション35選

RankRED

RankRed is a place where you can find a lot of interesting and inspiring stuff about science and technology, internet, programming tools and plugins, robots, machines and high tech gadgets, and much more.

本記事は、35 Impressive Ajax and CSS Loaders / Spinners
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

428 views

読了時間 : 約3分7秒

インターネット接続は日々高速化していますが、Webページの読み込みを待たなければならない瞬間もあります。開発者たちは、クリエイティブなローダー【コンピュータプログラムの種類や機能のひとつで、データやプログラムを外部から読み込む(load:ロードする)もの】を作ることで、この待ち時間を苦痛なく楽しく過ごせるように最善を尽くしています。

 

基本的にローダーは、バックグラウンドでプロセスが進行中で、それが数秒かかることを示します。その間ユーザーを確実に引き留めておくために、WebサイトやWebサーバーの管理者はユニークなローダーを使用しています。印象的なローダーの秘密は、面白いアニメーションと細部へのこだわりにあります。

 

数年前までは、アニメーションを読み込むのは大変で、GIFだけに限られていましたが、今では強力なテクノロジーとモダンブラウザ【Web標準に対応するブラウザ】によって、Ajax、CSS、jQueryで読み込むことができます。スピナー【ぐるぐる回るもの】は高度にカスタマイズ可能で、サーバーはユーザーからのリクエストをスムーズに処理します。

 

この記事では、ダウンロードしてプロジェクトで使用できる35の素晴らしいAjaxとCSS3【CSSの最新版】のローダーを紹介します。これらのローダーは、アルファ透過で軽量なスクリプトを使用しており、高度な設定が可能で、解像度に依存しません。

 

35. CSS3 Infinite Loader

作成者:Jonathan Silva

 

34. Redirecting Loader

作成者:Mr Alien

 

33. Light Loader

作成者:Jack Rugile

 

32. Polygon Loader

作成者:Daniel Reid

 

31. Loader – Day #9

作成者:Roch Bouchayer

 

30. Let’s Load Stuff

作成者:Tom Hewitt

 

29. Optical Illusion Spinner

作成者:Brian

 

28. Yet another CSS3 Loader

作成者:Dean Hidri

 

27. Simple Loader

作成者:Malhadi

 

26. Face Loader

作成者:Nicholas Guest

 

25. Loading Cake

作成者:Christian Dinkelborg

 

24. Gooey Loader

作成者:LukasOe

 

23. Ball Bounce

作成者:Daryll Doyle

 

22. Loader Css3

作成者:Mathieu Richard

 

21. CSS Rectangle Inception Spiral

作成者:Marian-COJOC-ro

 

20. ‘Making Pancake’ Loader

作成者:Pawel

 

19. 3d Loader

作成者:Bennett Feely

 

18. Ping Pong

作成者:Kieran Hunter

 

17. Loader a Day (day 2)

作成者:Reinier Kaper

 

16. CSS Stair Loader

作成者:Irko Palenius

 

15. Unswerving Tower

作成者:Dan Andréasson

 

14. Material Loading CSS

作成者:Yusuf Bakır

 

13. Climbing Ball

作成者:Fabrizio Bianchi

 

12. Loader Gooey Effect

作成者:Fabio Ottaviani

 

11. 3 Ball Drop

作成者:Chris Gannon

 

10. Codevember- Bookshelf Loader

作成者:Grélard Antoine

 

9. Simple Perspective Preloader

作成者:Creotip

 

8. Skew Loading

作成者:Jacob Foster

 

7. Code Loader in CSS

作成者:Deepak Kamat

 

6. Heart<3

作成者:Daniel Lin

 

5. Pacman

作成者:Massimo

 

4. Loader

作成者:Maroš Horniak

 

3. Cocktail Loader

作成者:Marc Malignan

 

2. Glowworm Loader

作成者:Keith McKnight

 

1.SVG Walk Cycle

作成者:Chris Gannon

おすすめ新着記事

おすすめタグ