프로그래스바에 애니메이션을 추가하고 싶어요!

안녕하세요! 강의 너무너무 잘 듣고 있습니다! 한가지 궁금한 점이 있는데, 프로그레스 바에 점점 차오르는 애니메이션을 추가하고 싶어서 코드를 따로 작성을 했는데 첫번째 질문에서 프로그레스바 애니메이션이 적용은 되는데 두번째 질문부터는 적용이 안되어서 어떻게 하면 될 지 궁금해서 질문 남깁니다..! 

.status {
  height: 20px;
  width: 80%;
  background-color: #F8EFFB;
  border-radius: 20px;
  justify-content: flex-start;
  display: flex;
}

.statusbar {
  height: 100%;
  border-radius: 20px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebe9f9+0,d8d0ef+50,cec7ec+51,c1bfea+100;Purple+3D+%231 */
  background: #ebe9f9;
  /* Old browsers */
  background: -moz-linear-gradient(top, #ebe9f9 0%, #d8d0ef 50%, #cec7ec 51%, #c1bfea 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ebe9f9 0%, #d8d0ef 50%, #cec7ec 51%, #c1bfea 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ebe9f9 0%, #d8d0ef 50%, #cec7ec 51%, #c1bfea 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebe9f9', endColorstr='#c1bfea', GradientType=0);
  /* IE6-9 */
  animation: load 1s normal forwards;
}