【CSS】ローディングアニメーション実装サンプル集

ローディングアニメーション、待ち時間のあれですね。
使えそうなものを随時追加してこうと思います。

ぐるぐるぐるぐるー

ぐるぐるぐるぐるー

サンプル

See the Pen CSS3 / loading animation by 125naroom (@125naroom) on CodePen.

さいごに

目が回りますねー

待ち時間は短いのがいいですねー

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

2019

【CSS】input、textareaのCSSを初期化する（iOS対策）

ちょっとメモですーよく忘れてしまうのでメモですーなぜ初期化？ iOS Safariではのフォーム要素（input,textarea）がデザイン通りにならないとこがあります。iOS Safariのデフォルトスタイルが優

...

CSS

デザインのメモ

2019

【CSS】吹き出しをつくる

ふきだしーふきだしー吹き出し（下） See the Pen CSSだけで、ふきだしをつくる by 125naroom (@125naroom) on CodePen. HTML CSS 吹き出し（上） See the

...

CSS

デザインのメモ

2019

【CSS】ホバー（マウスオーバー）実装サンプル集（画像の明度を上げる編）

ホバーってなんですか？マウスオーバーともいいますねー opacity、一択だと思っていた画像をホバー（マウスオーバー）すると光るやつ。ほんとは半透明にしてるだけだから透過して背景次第でなんだかなということがよくあった

...

CSS

デザインのメモ

Googleさんの
おすすめ

2025

人気記事

2024.3.1

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）

ん、ハンバーガー？三本線がハンバーガーに見えるからってことらしいですよクリックエフェクトサンプル集いろんなハンバーガーメニューのクリック時のエフェクトを作ってみる。動きがわかりやすいようにゆっくり動くように指定。

...

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）

CSS

デザインのメモ

2024.7.11

【jQuery】スライダープラグイン「slick」実装サンプル集

slick（スリック）の使い方をまとめてくださいーわかりましたーよく見かけるスライダー（自動再生） See the Pen 【jQuery】スライダープラグイン「slick」よく見かけるスライダー（自動再生） by

...

jQuery slick

デザインのメモ

2024.2.2

【jQuery】アコーディオン実装サンプル10選

jQueryのアコーディオン実装サンプルを作りました。サイト制作でよく使うものをまとめました。いろいろありますねーいろいろあるのでまとめましたーアコーディオン、シンプル版 See the Pen アコーディオン、シ

...

jQuery

デザインのメモ

Googleさんの
おすすめ

2025

SPONSORED LINK

おすすめの広告です

google

デザインの記事

2025.07.07New
角ハイボール角瓶
国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
デザインのこと – Web design gallery

2025.07.08New
小窓
リフォームの時に小窓をつけました。やっぱり木っていいなって思います。もともとは穴…
いつかのこと

【jQuery】タブ切り替え実装サンプル集（上下連動、下タブを押すとスクロールして上に、外部ページからのリンクIDも可能）

2025.04.04
【jQuery】タブ切り替え実装サンプル集（上下連動、下タブを押すとスクロールして上に、外部ページからのリンクIDも可能）
少し複雑な『タブ切り替え』を実装してみました。 ▽今回の実装テーマなんだか難しそう…
125naroom / デザインするところ（会社）です。