progress <dt> demo

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.1.4" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="controls">
      <button type="button" class="js-show js-show-dt" disabled>看 &lt;dt&gt;</button>
      <button type="button" class="js-show js-show-dd">看 &lt;dd&gt;</button>
    </div>
    <div class="progress">
      <dt></dt>
      <dd></dd>
    </div>
    <div class="progress diff">
      <dt></dt>
      <dd></dd>
    </div>
  </body>

</html>

// Code goes here

$(function () {
  $('.js-show-dd').click(function () {
    $('body').addClass('show-dd');
    $('.js-show').prop('disabled', true)
    .filter('.js-show-dt').prop('disabled', false);
  })
  
  $('.js-show-dt').click(function () {
    $('body').removeClass('show-dd');
    $('.js-show').prop('disabled', true)
    .filter('.js-show-dd').prop('disabled', false);
  })
});

.controls {
  height: 30px;
}
.progress {
  position: relative;
  z-index: 2147483647;
  top: 50px;
  left: 0;
  width: 300px;
  height: 2px;
  background: #b91f1f;
  border-radius: 1px;
  -moz-transition: width 500ms ease-out,opacity 500ms linear;
  -webkit-transition: width 500ms ease-out,opacity 500ms linear;
  transition: width 500ms ease-out,opacity 500ms linear;
  
  transform-origin: 100%;
  
  -moz-transform: translateZ(0) scale(2);
  -ms-transform: translateZ(0) scale(2);
  -webkit-transform: translateZ(0) scale(2);
  transform: translateZ(0) scale(2);
  will-change: width,opacity;
}

.progress.done {
  opacity: 0;
}

.progress dd,.progress dt {
  position: absolute;
  top: 0;
  height: 2px;
  box-shadow: #b91f1f 1px 0 6px 1px;
  border-radius: 100%;
}

.progress dd {
  display: none;
  opacity: .6;
  width: 20px;
  right: 0;
  clip: rect(-6px,22px,14px,10px);
}

.progress dt {
  opacity: .6; 
  width: 180px;
  right: -80px;
  clip: rect(-6px,90px,14px,-6px); 
}

.progress.diff {
  top: 100px;
}

.progress.diff dt, .progress.diff dd {
  opacity: 1;
  background-color: white;
  clip: auto;
}

.progress.diff dt:before {
  box-sizing: border-box;
  content: ' ';
  
  position: absolute;
  left: -6px; width: 96px;
  top: -6px; height: 20px;
  
  border: 1px solid blue;
}

.progress.diff dd:before {
  box-sizing: border-box;
  content: ' ';
  
  position: absolute;
  left: 10px; width: 12px;
  top: -6px; height: 20px;
  
  border: 1px solid blue;
}

.show-dd .progress dd {
  display: block;
}
.show-dd .progress dt {
  display: none;
}