保育士していた学生が起業してビジネスの成功者になるまで...

保育士の働く環境、学童と児童館で教育を受けれられる環境を作るために活動。ビジョンは「子どもに人生の糧をつくる」である。ここではそんな活動の経緯と自分のアイデアをまとめていきます。

Codepenにある|すごいデザイン集-Loadingに使える!カッコ良すぎなデザイン10選|CodeDoIt.com

ホームページを開く際に画像が多くあるなどすると開くのが非常に遅くなります。

しかし、そのストレスを感じさせないようにするのがLoadingです。ここではCodepenで見つけた素晴らしいLoadingを厳選してご紹介します。

f:id:hajime0308:20170201191205p:plain

 

なおscssをcssに変換したい方は以下のサイトがオススメです。

www.sassmeister.com

1.Animated wave clipped by text

See the Pen Animated wave clipped by text by web-tiki (@web-tiki) on CodePen.

2.Pharmacy Loader

See the Pen Pharmacy Loader by Mark Thomes (@WithAnEs) on CodePen.

3.SVG Loading icons

See the Pen SVG Loading icons by Aurer (@aurer) on CodePen.

4.Battlefield 3 Loading Indicator

See the Pen Battlefield 3 Loading Indicator by Gareth Weaver (@garethdweaver) on CodePen.

5.Loaders (WIP)

様々なLoadをコピペできます!

See the Pen Loaders (WIP) by Tania LD (@TaniaLD) on CodePen.

6.CSS3 Loaders

コピペで動きます!

See the Pen CSS3 Loaders by Siddharth Parmar (@Siddharth11) on CodePen.

7.Pure CSS Loaders kit

CSSのコピペで動くのがいいですね!

See the Pen Pure CSS Loaders kit by Viduthalai Mani (@viduthalai1947) on CodePen.

8.Glitchy Loading Indicator

残念ながら使うにはプラグインが必要です。

See the Pen Glitchy Loading Indicator by Jack Rugile (@jackrugile) on CodePen.

9.Material Design Spinner

色が変わりながら回転するLoadingです。コピペで動きます!

See the Pen Material Design Spinner by Fran Pérez (@mrrocks) on CodePen.

10.CSS Loader

シンプルな回転の種類が複数あります。コピペで動きます!

See the Pen CSS Loader by Geoffrey Crofte (@CreativeJuiz) on CodePen.

11.KaWvja

See the Pen KaWvja by nattu (@Nataraj32) on CodePen.

12.Fun with loaders/spinners

コピペで再現できます!

See the Pen Fun with loaders/spinners by Jakob Lewis (@Jakeyikapp) on CodePen.





こういうメディアを作ることによって、こんんご簡単に美ししUIUXのHomePageが多く出てくると思っています。

http://codedoit.com/

関連記事

hajimesbusiness.hatenablog.com

hajimesbusiness.hatenablog.com