2016年12月3日(土)
CSSのみで実現するカラフルポップなローディングアニメ「CSS PIN」
WEBサイトに欠かせないUI/UXの一つローディング。この小さなアニメーションで多くのストレスが軽減でき、かつ世界観を表現できます。ローディングアニメーションには様々な作り方がありますが、今回紹介するのはCSSのみで実現するカラフルポップなローディングアニメ「CSS PIN」です。
全部で10個のローディングアニメーションが公開されており、どれもクリエイティブでポップな印象を受けます。
詳しくは以下
基本的には指定のCSSを読み込み、HTML側には1行コードを記載するだけで利用することが可能です。ソースコードについてCSSについては、githubに公開されています。
ライセンスはMIT Licenseとなっており、ライセンスの範囲内で自由に利用することが可能です。サイトの世界観に合ったものがあれば、使い勝手のいいローディングアニメーションだと思います。
CSSPIN – CSS Spinners and Loaders
0
0
0
39author:
Design Develop
デザインを開発するという視点からWEBデザインに役立つ情報を発信しているクリエイティブBLOG
Ads
デザインを開発するという視点からWEBデザインに役立つ情報を発信しているクリエイティブBLOGDesign Developの記事『CSSのみで実現するカラフルポップなローディングアニメ「CSS PIN」』についてまとめています。
この記事は特にアニメーション・CSS3・UXについて書かれており、 Webデザイン、HTML+CSSコーディングのカテゴリーに分類されます。気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のDesign Developで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとDesign Developの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
