最近使ったもの

    ツールを開くと、ここに表示されます。

    プログレスバー作成

    アニメーション付きのプログレスバーをデザインします

    このツールを共有

    問題を報告

    非公開の入力内容やファイルは含めずに、問題を説明してください。

    このツールはどのくらい役に立ちましたか?

    このツールはどのくらい役に立ちましたか?

    プログレスバーをデザイン

    形状とテーマを選択し、詳細を調整してください。

    クイックテーマ
    その他の設定
    寸法と形状
    色とグラデーション
    枠線の設定
    ラベル
    アニメーションと効果

    プレビューとコード

    プレビューの背景

    プレビューはこのパネルに収まるよう表示されます。エクスポートの寸法とコードは、選択したサイズを保持します。

    プレビューを更新しました。プロジェクト用にHTMLとCSSの両方をコピーしてください。

    PNGエクスポートのプレビュー

    PNGは白背景の静止画像です。元のキャンバスのスタイルを使用し、グラデーションと枠線は直線型のバーにのみ適用されます。CSSの発光、ストライプ、脈動、トランジションは、ライブプレビューとコードで利用できます。

    HTMLマークアップ
    <div class="progress-container">
  <div class="progress-bar"></div>
  <div class="progress-label">
    読み込み中... 65%
  </div>
</div>
    CSSスタイル
    .progress-container {
  width: 400px;
  max-width: 100%;
  height: 20px;
  background-color: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  
  
}

.progress-bar {
  height: 100%;
  width: 65%;
  background: #3b82f6;
  border-radius: 10px;
  transition: width 1.5s ease-in-out;
  
  
  
}





.progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #1f2937;
  font-weight: bold;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

    HTMLとCSSは一緒に使用します。これらはこの固定値を表すものです。アプリ内で進捗の更新処理とアクセシビリティのセマンティクスを連携させてください。

    使い方のヒント
    • 直線型：読み込みインジケーターやファイルのアップロードに。
    • 円形：ゲージやスキルの表示に。
    • 半円形：ダッシュボードの指標や割り当て量の使用状況に。
    • 縦型：バッテリーやストレージのインジケーターに。
    • ドット：ページ切り替えや一連の手順の進捗表示に。
    • ステップ型：複数ステップの処理における節目の表示に。

    プログレスバー作成について、無料CSSプログレスバー生成ツール

    色、ラベル、効果を設定して、美しくアニメーションするプログレスバーをデザインできます。HTMLとCSSを一緒にコピーするか、選択した寸法の静的なPNGとして書き出せます。6種類の形状、6種類のテーマ、3種類の変化曲線を利用できます。PNGは別のキャンバス描画機能を使い、グラデーションと枠線は直線型バーにのみ適用され、CSSアニメーション、ストライプ、発光は含まれません。オンラインで使えるこのプログレスバー生成ツールを組み込む前に、対象のレイアウトで出力を確認してください。

    進捗表示は、現代のウェブやモバイルのデザインに欠かせないUIパターンです。読み込み状況、作業の完了度、スキルの習熟度、目標の達成状況をユーザーに伝えます。CSSを最初から手書きする代わりに、このビジュアルエディターで色、角丸、ストライプ、グラデーション、ラベルなどの細部を設定し、生成コードをプロジェクトへ直接コピーできます。

    このツールはリアルタイムのライブプレビューとキャンバス書き出しプレビューを並べて表示し、確定する前にプログレスバーの見た目を正確に確認できます。ダッシュボードのゲージ、ファイルアップロードの進捗表示、複数ステップのウィザード、ドット型のページ位置表示など、プログレスバー作成では用途に合ったスタイルと整ったコードを用意できます。

    デザイン

    最近追加されたツール

    すべてのツール

    プライバシー設定

    分析、広告、パーソナライズの設定を選択してください。必須ストレージは、テーマや保存したツールなどの機能を維持するために使われます。

    必須ストレージは常に有効です。