Skip to main content
Penguin Toolsペンギンツールズ

CSSローダー生成器

CSSアニメーションのローダーを選んでコードを取得するツール。 スピナー・ドット・バーなど多数のデザインから色やサイズを調整。

20px80px
0.5s3.0s
<div class="loader-spinner"></div>
.loader-spinner {
  width: 40px;
  height: 40px;
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-left-color: #3B82F6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
このツールをシェア
📖

使い方

Step 1

ローダー選択

ローダー選択

お好みのローダーデザインを選択

Step 2

カスタマイズ

カスタマイズ

色やサイズを調整

Step 3

コピー

コピー

HTML/CSSコードをコピー

✨

このツールの特徴

豊富なデザイン

スピナー・ドット・バーなど多数のローダー

カスタマイズ

色・サイズ・速度を自由に調整

コピー&ペースト

HTML+CSSをそのままコピーして使用

❓

よくある質問

スピナー、ドット、バー、リング、パルスなど多種類あります。

🔗関連ツール

🎨
デザイン

カラーコード変換器

HEX・RGB・HSLのカラーコードを相互変換。 カラーピッカーとリアルタイムプレビューで直感的に操作。

🎨
デザイン

カラーピッカー

カラーホイールやスライダーで直感的に色を選べるツール。 HEX・RGB・HSL形式でカラーコードを取得・コピーできる。

🎨
デザイン

画像色抽出器

画像から主要な色を自動検出してカラーパレットを生成。 画像上の任意の位置をクリックして個別に色を取得することも可能。

🎯
デザイン

画像平均色取得

画像全体または選択範囲の平均色を算出するツール。 デザインの配色決めやサムネイル背景色の決定に活用できる。

🌈
デザイン

CSSグラデーション生成器

CSSグラデーションをドラッグ操作で視覚的に作成するツール。 リニア・ラジアル・コニックの3タイプとプリセットを搭載。

🔲
デザイン

CSSボックスシャドウ生成器

CSSのbox-shadowをスライダーで視覚的に調整・生成するツール。 複数シャドウの重ね合わせや内側シャドウ（inset）にも対応。