--- a/devtools/client/animationinspector/components/animation-details.js
+++ b/devtools/client/animationinspector/components/animation-details.js
@@ -203,27 +203,38 @@ AnimationDetails.prototype = {
 
   renderAnimatedPropertiesHeader: function () {
     // Add animated property header.
     const headerEl = createNode({
       parent: this.containerEl,
       attributes: { "class": "animated-properties-header property" }
     });
 
+    // Add progress tick container.
+    const progressTickContainerEl = createNode({
+      parent: headerEl,
+      attributes: { "class": "progress-tick-container track-container" }
+    });
+
     // Add label container.
     const headerLabelContainerEl = createNode({
       parent: headerEl,
       attributes: { "class": "track-container" }
     });
 
     // Add labels
     for (let label of [L10N.getFormatStr("detail.propertiesHeader.percentage", 0),
                        L10N.getFormatStr("detail.propertiesHeader.percentage", 50),
                        L10N.getFormatStr("detail.propertiesHeader.percentage", 100)]) {
       createNode({
+        parent: progressTickContainerEl,
+        nodeType: "span",
+        attributes: { "class": "progress-tick" }
+      });
+      createNode({
         parent: headerLabelContainerEl,
         nodeType: "label",
         attributes: { "class": "header-item" },
         textContent: label
       });
     }
   },
 

--- a/devtools/client/themes/animationinspector.css
+++ b/devtools/client/themes/animationinspector.css
@@ -316,16 +316,17 @@ body {
   height: var(--timeline-animation-height);
   overflow: hidden;
 }
 
 .animation-timeline .time-body {
   height: 100%;
 }
 
+.progress-tick-container .progress-tick,
 .animation-timeline .time-body .time-tick {
   -moz-user-select: none;
   position: absolute;
   width: 0;
   /* When scroll bar is shown, make it covers entire time-body */
   height: 100%;
   /* When scroll bar is hidden, make it as tall as the viewport minus the
      timeline animation height and the header-wrapper's borders */
@@ -680,8 +681,16 @@ body {
   left: 50%;
 }
 
 .animated-properties-header .header-item:nth-child(3) {
   right: 0;
   border-left: none;
   border-right: 0.5px solid var(--time-graduation-border-color);
 }
+
+.progress-tick-container .progress-tick:nth-child(2) {
+  left: 50%;
+}
+
+.progress-tick-container .progress-tick:nth-child(3) {
+  left: 100%;
+}