コーディング

GIFアニメーションを使用せずにloadingのアニメーションを実現する方法

2017.02.03

2017.05.29

マグロの握り

JSの読み込みや大きなサイズの画像の読み込みの際に一時的に表示するローディングのアニメーションですが、昔はGIFアニメーションを使用していました。
しかしGiFアニメーションでは背景に制限があったり、透過にすると縁が汚くなるといった弊害があります。

今回はPNG画像とCSS仕様したローディングアニメーションを紹介します。
ソースコードは以下の通りです。

See the Pen loading by tetsuro (@tetsuro) on CodePen.

5行目の1sの部分を調整すると回転の速さを調整することができます。
10行目の360degを-360degに変更すると回転方向が逆になります。

参考にしてください。

SHARE

この記事の筆者

Webクリエイター 古川 徹朗

Webクリエイター 古川 徹朗

Webに関する様々な知識を身に付け、理論的な問題解決を常に目指す頭脳派クリエイター。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。