.audio-comment-container {

  button:focus {
    outline:0;
  }

  button.play-button {
    border:none;
    background-image:none;
    background-color:transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    i {
      font-size: 25px;
      margin-left: -10px;
    }
  }

  display: flex;
  vertical-align: middle;
  padding: 0%;
  width: 100%;

  i {
    color: white;
  }

  p#currentTime {
    float: right;
    white-space: nowrap;
    font-size: 12px;
    transform: translateY(16%);
    padding-left: 10px;
  }


  .progress-bar-container {
    background-color: white;
    width: 100%;
    height: 3px;
    align-self: center;
    margin-bottom: 0px;
    border-radius: 0px;

    .progress {
      box-shadow: 0px;
    }

    .progress-bar {
      background-color: #18FFFF;
      width: 100%;
      transition : width 0.5s linear;
      box-shadow: none;
      border-radius: 0px;
    }
  }
}
.audio-comment-container {

  button:focus {
    outline:0;
  }

  button.play-button {
    border:none;
    background-image:none;
    background-color:transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    i {
      font-size: 25px;
      margin-left: -10px;
    }
  }

  display: flex;
  vertical-align: middle;
  padding: 0%;
  width: 100%;

  i {
    color: white;
  }

  p#currentTime {
    float: right;
    white-space: nowrap;
    font-size: 12px;
    transform: translateY(16%);
    padding-left: 10px;
  }


  .progress-bar-container {
    background-color: white;
    width: 100%;
    height: 3px;
    align-self: center;
    margin-bottom: 0px;
    border-radius: 0px;

    .progress {
      box-shadow: 0px;
    }

    .progress-bar {
      background-color: #B0BEC5;
      width: 100%;
      transition : width 0.5s ease;
      box-shadow: none;
      border-radius: 0px;
    }
  }
}
Improve animation and color of audio playback progress
LOOKS: Improve animation and color of audio playback progress
