ローディング

おしゃれで使いやすいローディングアニメーション!コピペで実装【HTML/CSS】




CSSで使えるおしゃれなローディングをまとめてみました!

codepenから引用しています

おしゃれ×使いやすい コピペで実装

おしゃれで使いやすいものを集めてみました!

あなたのサイトに合うローディングアニメーションを探してみてください!

ドット➀

ドットから広がる淡い光

See the Pen
Staggered Wave Loading
by alphardex (@alphardex)
on CodePen.

ライン

柔らかく光るライン

See the Pen
Glowing Loading Bar
by Nick Pettit (@nickpettit)
on CodePen.

リング

光るリングがぐるぐると・・・

See the Pen
Android Neon Loader
by Mattia Astorino (@equinusocio)
on CodePen.

ダブルリング

回転速度の違うダブルリング

See the Pen
Text Ring Loading Animation
by Jon Kantner (@jkantner)
on CodePen.

バーコード

“Loading”の文字が分裂してバーコードに

See the Pen
Loading Text
by Aaron Iker (@aaroniker)
on CodePen.

螺旋

螺旋状に回っているドットのライン

See the Pen
Cloudy Spiral CSS animation
by Hakim El Hattab (@hakimel)
on CodePen.

宇宙

カーソルを動かすと・・・

See the Pen
Nutanix Loading Screen
by Ken Chen (@kenchen)
on CodePen.

波打ち

背景がまずおしゃれ!!

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

砂時計

くるくる回る砂時計

See the Pen
Hourglass Loader
by Tom Hazledine (@tomhazledine)
on CodePen.

ドット➁

See the Pen
CSS Spinner
by Minesh Mitha (@Minesh93)
on CodePen.

ウェーブ

ウェーブで文字が・・・

See the Pen
Yet another loading animation
by Austin Zach (@austinmzach)
on CodePen.

ゲームが始まる

See the Pen
CSS 3 Loading
by Gerta Xhepi (@xhepigerta)
on CodePen.

Googleしごと検索を使えば、『無料で』求人を
検索のトップ表示にできます!

Googleの新機能を堪能しませんか?

覗いてみる!

いままでの様に、求人広告やリスティング広告に多額の費用を支払う時代はもう終わりました

2019年から始まった新しいサービス「Googleしごと検索」を活用することで、誰でも簡単にGoogleの巨大プラットフームを利用できるようになったのです!

『すべて無料』で始められます!