diff --git a/packages/carbon-react/src/components/ProgressBar/ProgressBar.stories.js b/packages/carbon-react/src/components/ProgressBar/ProgressBar.stories.js
new file mode 100644
index 000000000000..2afc1805db69
--- /dev/null
+++ b/packages/carbon-react/src/components/ProgressBar/ProgressBar.stories.js
@@ -0,0 +1,69 @@
+/**
+ * Copyright IBM Corp. 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useState, useEffect } from 'react';
+
+import { unstable_ProgressBar as ProgressBar } from 'carbon-components-react';
+
+export default {
+ title: 'Experimental/unstable_ProgressBar',
+
+ parameters: {
+ component: ProgressBar,
+ },
+};
+
+export const _ProgressBar = () => (
+
+);
+
+export const Indeterminate = () => (
+
+);
+
+export const Example = () => {
+ const size = 728;
+ const [progress, setProgress] = useState(0);
+
+ useEffect(() => {
+ setTimeout(() => {
+ const interval = setInterval(() => {
+ setProgress((currentProgress) => {
+ const advancement = Math.random() * 8;
+ if (currentProgress + advancement < size) {
+ return currentProgress + advancement;
+ } else {
+ clearInterval(interval);
+ return size;
+ }
+ });
+ }, 50);
+ }, 3000);
+ }, []);
+
+ const running = progress > 0;
+
+ let helperText = running
+ ? `${progress.toFixed(1)}MB of ${size}MB`
+ : 'Fetching assets...';
+ if (progress >= size) {
+ helperText = 'Done';
+ }
+
+ return (
+
+ );
+};
diff --git a/packages/carbon-react/src/components/ProgressBar/index.js b/packages/carbon-react/src/components/ProgressBar/index.js
new file mode 100644
index 000000000000..9d7069e6c540
--- /dev/null
+++ b/packages/carbon-react/src/components/ProgressBar/index.js
@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { ProgressBar } from 'carbon-components-react';
diff --git a/packages/styles/scss/components/__tests__/progress-bar-test.js b/packages/styles/scss/components/__tests__/progress-bar-test.js
new file mode 100644
index 000000000000..1e7b87fd852d
--- /dev/null
+++ b/packages/styles/scss/components/__tests__/progress-bar-test.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/progress-bar', () => {
+ test('Public API', async () => {
+ const { unwrap } = await render(`
+ @use 'sass:meta';
+ @use '../progress-bar';
+
+ $_: get('mixin', meta.mixin-exists('progress-bar', 'progress-bar'));
+ `);
+ expect(unwrap('mixin')).toBe(true);
+ });
+});
diff --git a/packages/styles/scss/components/_index.scss b/packages/styles/scss/components/_index.scss
index 35a6c7e67454..8740370dbd0c 100644
--- a/packages/styles/scss/components/_index.scss
+++ b/packages/styles/scss/components/_index.scss
@@ -42,6 +42,7 @@
@use 'pagination';
@use 'pagination-nav';
@use 'select';
+@use 'progress-bar';
@use 'progress-indicator';
@use 'tabs';
@use 'ui-shell';
diff --git a/packages/styles/scss/components/progress-bar/_index.scss b/packages/styles/scss/components/progress-bar/_index.scss
new file mode 100644
index 000000000000..e3521031b965
--- /dev/null
+++ b/packages/styles/scss/components/progress-bar/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'progress-bar';
+@use 'progress-bar';
+
+@include progress-bar.progress-bar;
diff --git a/packages/styles/scss/components/progress-bar/_progress-bar.scss b/packages/styles/scss/components/progress-bar/_progress-bar.scss
new file mode 100644
index 000000000000..2e11cdbd5e28
--- /dev/null
+++ b/packages/styles/scss/components/progress-bar/_progress-bar.scss
@@ -0,0 +1,82 @@
+//
+// Copyright IBM Corp. 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '../../config' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../type' as *;
+@use '../../utilities/convert' as *;
+
+/// Progress Bar styles
+/// @access public
+/// @group progress-bar
+@mixin progress-bar {
+ .#{$prefix}--progress-bar__label {
+ @include type-style('body-short-01');
+
+ display: block;
+ margin-bottom: $spacing-03;
+ color: $text-primary;
+ }
+
+ .#{$prefix}--progress-bar__track {
+ position: relative;
+ width: 100%;
+ height: rem(8px);
+ background-color: $layer;
+ }
+
+ .#{$prefix}--progress-bar__bar {
+ display: block;
+ width: 100%;
+ height: 100%;
+ background-color: $interactive;
+ transform: scaleX(0);
+ transform-origin: 0 50%;
+ transition: transform $duration-fast-02 motion(standard, productive);
+ }
+
+ .#{$prefix}--progress-bar--indeterminate
+ .#{$prefix}--progress-bar__track::after {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ animation-duration: 1400ms;
+ animation-iteration-count: infinite;
+ animation-name: progress-bar-indeterminate;
+ animation-timing-function: linear;
+ background-image: linear-gradient(
+ 90deg,
+ $interactive 12.5%,
+ transparent 12.5%
+ );
+ background-position-x: 0%;
+ background-size: 200% 100%;
+ content: '';
+ }
+
+ .#{$prefix}--progress-bar__helper-text {
+ @include type-style('helper-text-01');
+
+ margin-top: $spacing-02;
+ color: $text-secondary;
+ }
+
+ @keyframes progress-bar-indeterminate {
+ 0% {
+ background-position-x: 25%;
+ }
+
+ 80%,
+ 100% {
+ background-position-x: -105%;
+ }
+ }
+}