---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/elements/progress-bar'
title: 'Progress barエレメントの追加 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:19:15+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  進み具合が一目でわかる、ラベル付きの色付きバーを設置できます。プロジェクトの状況、募金目標、講座の進捗、スキルレベルに使います。

  プログレスバーの追加
  ログインした状態でページを開きます。コンテンツエリアにカーソルを合わせると、ビルダーのコントロールが表示されます。基本操作は最初のページをご覧ください。
tags:
  - 'Data and motion'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T14:19:15+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Progress barエレメントの追加'
      description: |-
        進み具合が一目でわかる、ラベル付きの色付きバーを設置できます。プロジェクトの状況、募金目標、講座の進捗、スキルレベルに使います。

        プログレスバーの追加
        ログインした状態でページを開きます。コンテンツエリアにカーソルを合わせると、ビルダーのコントロールが表示されます。基本操作は最初のページをご覧ください。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:19:15+0000'
      dateModified: '2026-10-24T14:19:15+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/elements/progress-bar'
      articleSection: データとモーション
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/elements/progress-bar'
      description: |-
        進み具合が一目でわかる、ラベル付きの色付きバーを設置できます。プロジェクトの状況、募金目標、講座の進捗、スキルレベルに使います。

        プログレスバーの追加
        ログインした状態でページを開きます。コンテンツエリアにカーソルを合わせると、ビルダーのコントロールが表示されます。基本操作は最初のページをご覧ください。
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: ホーム
            item: 'https://dxpr.com/ja'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: ja
---
[ヘルプセンター](/ja/node/75)/[ドキュメント](/ja/hc/documentation) /[DXPR Builderを学ぶ](/ja/hc/documentation/learn-dxpr-builder) /[ページを作る](/ja/hc/documentation/learn-dxpr-builder/build) /[コンテンツを追加](/ja/hc/documentation/learn-dxpr-builder/elements) /[データとモーション](/ja/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Progress barエレメントの追加.

 DXPR Builderを学ぶページを作るコンテンツを追加データとモーション

   ## このガイドの内容

 関連ガイド

- [Styleパネルでのエレメントの見た目の変更](/ja/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

進み具合が一目でわかる、ラベル付きの色付きバーを設置できます。プロジェクトの状況、募金目標、講座の進捗、スキルレベルに使います。

## プログレスバーの追加

ログインした状態でページを開きます。コンテンツエリアにカーソルを合わせると、ビルダーのコントロールが表示されます。基本操作は[最初のページ](/hc/documentation/learn-dxpr-builder/getting-started/first-page)をご覧ください。

1. カラムにカーソルを合わせ、コントロールバーの**+**をクリックします。空のページでは**Add Elements**をクリックします。**Content**タブを開き、**Progress bar**をクリックします。カラムの一番上に追加され、設定ダイアログが開きます。
2. バーの**Label**を入力します（例：「Website redesign」）。
3. 塗りつぶし量は**Progress**をドラッグして設定します。スライダー横のボックスへの直接入力もできます。ここでは73パーセントにします。
4. パレットから、塗りつぶし部分の**Front color**を選びます。
5. 同じダイアログの下部で、バーに**Stripes**を付けるか選びます。ここでは**Add striped pattern to bar**にチェックを付けます。
6. ダイアログの**Save**をクリックします。次に、コンテンツエリア上部のツールバーにある**Save**をクリックして、ページを保存します。

  ## 表示内容

ラベル付きのバーが、設定した値まで選んだ色で塗りつぶされます。ラベルは塗りつぶし部分の中に表示されます。動画では、ストライプのバーにWebsite redesignと表示され、トラックの73%まで塗りつぶされています。ページを保存して公開すると、訪問者に表示されます。

## プログレスバーの設定

エレメントにカーソルを合わせ、コントロールバーの**More > Settings**を開きます。設定項目は次のとおりです。

- **Label:** バー上のテキスト。ページ上のラベルをクリックしてその場で編集することもできます。
- **Progress:** バーの塗りつぶし量。0から100パーセントで指定します。初期値は50です。
- **Bar height:** バーの高さ（ピクセル）。初期値は45です。
- **Back color:** 空のトラックの色。
- **Front color:** 塗りつぶし部分の色。
- **Grow animation:** 初期値はオフです。オンにすると、バーは空から始まり、半分が画面内に入ったところで塗りつぶされます。
- **Stripes:** **Add striped pattern to bar**で斜めストライプを付けます。**Animate stripes (requires striped pattern)**でストライプを動かします。

## 表示されない場合

- **ContentタブにProgress barがない。** ユーザープロファイルで非表示になっています。管理者に[User Profiles](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)での有効化を依頼してください。
- **再読み込み後に消えている。** ページが保存されていません。追加し直し、コンテンツエリア上部のツールバーにある**Save**をクリックします。
- **バーが空に見える。** **Progress**が0か、**Grow animation**がオンでバーがまだ半分表示されていません。バーまでスクロールするか、エレメントにカーソルを合わせてコントロールバーの**More > Settings**を開き、**Progress**を上げます。
- **ストライプがない、または動かない。** **Add striped pattern to bar**にチェックが付いておらず、**Animate stripes (requires striped pattern)**にはそのチェックが必要です。**Stripes**にある**Add striped pattern to bar**にチェックを付けます。
- **塗りつぶし部分がトラックに溶け込んでいる。** **Front color**と**Back color**が似すぎています。濃いめの**Front color**か明るめの**Back color**を選びます。

## 次のステップ

[Styleタブ](/hc/documentation/learn-dxpr-builder/element-settings/style-tab)でプログレスバーの間隔や背景を変更します。