new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/ProgressInspectionPanel.js
@@ -0,0 +1,46 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+
+const TickLabels = createFactory(require("./TickLabels"));
+const TickLines = createFactory(require("./TickLines"));
+
+/**
+ * This component is a panel for the progress of animations or keyframes, supports
+ * displaying the ticks, take the areas of indicator and the list.
+ */
+class ProgressInspectionPanel extends PureComponent {
+  static get propTypes() {
+    return {
+      indicator: PropTypes.any.isRequired,
+      list: PropTypes.any.isRequired,
+      ticks: PropTypes.arrayOf(PropTypes.object).isRequired,
+    };
+  }
+
+  render() {
+    const {
+      indicator,
+      list,
+      ticks,
+    } = this.props;
+
+    return dom.div(
+      {
+        className: "progress-inspection-panel",
+      },
+      dom.div({ className: "background" }, TickLines({ ticks })),
+      dom.div({ className: "indicator" }, indicator),
+      dom.div({ className: "header devtools-toolbar" }, TickLabels({ ticks })),
+      list
+    );
+  }
+}
+
+module.exports = ProgressInspectionPanel;

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/TickLabels.js
@@ -0,0 +1,41 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { PureComponent } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+
+/**
+ * This component is intended to show tick labels on the header.
+ */
+class TickLabels extends PureComponent {
+  static get propTypes() {
+    return {
+      ticks: PropTypes.array.isRequired,
+    };
+  }
+
+  render() {
+    const { ticks } = this.props;
+
+    return dom.div(
+      {
+        className: "tick-labels"
+      },
+      ticks.map(tick =>
+        dom.div(
+          {
+            className: "tick-label",
+            style: { left: `${ tick.position }%` },
+          },
+          tick.label
+        )
+      )
+    );
+  }
+}
+
+module.exports = TickLabels;

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/TickLines.js
@@ -0,0 +1,40 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { PureComponent } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+
+/**
+ * This component is intended to show the tick line as the background.
+ */
+class TickLines extends PureComponent {
+  static get propTypes() {
+    return {
+      ticks: PropTypes.array.isRequired,
+    };
+  }
+
+  render() {
+    const { ticks } = this.props;
+
+    return dom.div(
+      {
+        className: "tick-lines"
+      },
+      ticks.map(tick =>
+        dom.div(
+          {
+            className: "tick-line",
+            style: { left: `${ tick.position }%` }
+          }
+        )
+      )
+    );
+  }
+}
+
+module.exports = TickLines;

--- a/devtools/client/inspector/animation/components/moz.build
+++ b/devtools/client/inspector/animation/components/moz.build
@@ -28,10 +28,13 @@ DevToolsModules(
     'CurrentTimeScrubber.js',
     'CurrentTimeScrubberController.js',
     'KeyframesProgressBar.js',
     'KeyframesProgressTickItem.js',
     'KeyframesProgressTickList.js',
     'NoAnimationPanel.js',
     'PauseResumeButton.js',
     'PlaybackRateSelector.js',
+    'ProgressInspectionPanel.js',
     'RewindButton.js',
+    'TickLabels.js',
+    'TickLines.js',
 )

--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -668,16 +668,74 @@ select.playback-rate-selector.devtools-b
 .animated-property-list-container.csstransition .keyframe-marker-item {
   background-color: var(--fill-color-csstransition);
 }
 
 .animated-property-list-container.scriptanimation .keyframe-marker-item {
   background-color: var(--fill-color-scriptanimation);
 }
 
+/* Common Components */
+/* Progress Inspection Panel */
+.progress-inspection-panel {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.progress-inspection-panel > .header {
+  padding: 0;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.progress-inspection-panel > ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.progress-inspection-panel > div,
+.progress-inspection-panel > ul > li {
+  display: grid;
+  grid-template-columns:
+    var(--sidebar-width) calc(100% - var(--sidebar-width) - var(--graph-right-offset)) var(--graph-right-offset);
+}
+
+/* Tick Lines */
+.tick-lines {
+  grid-column: 2 / 3;
+  position: relative;
+}
+
+.tick-line {
+  position: absolute;
+}
+
+.tick-line::before {
+  border-left: var(--tick-line-style);
+  content: "";
+  height: 100vh;
+  position: fixed;
+}
+
+/* Tick Labels */
+.tick-labels {
+  grid-column: 2 / 3;
+  height: 100%;
+  position: relative;
+}
+
+.tick-label {
+  border-left: var(--tick-line-style);
+  height: 100%;
+  position: absolute;
+}
+
 /* No Animation Panel */
 .animation-error-message {
   overflow: auto;
 }
 
 .animation-error-message > p {
   white-space: pre;
 }