SOURCE

<main>
    <div class="progress-outer">  <!--更好的扩展-->
      <div class="progress-enter">
        <div class="progress-bg"></div>
      </div>
      <!-- <span>60%</span> -->
    </div>
  </main>

@keyframes panoramic{
  to {
    background-position: 500% 0;
  }
}
main {
    width: 100%;
    padding: 80px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; 
  }
  .progress-outer {
    width: 60%; height: 12px;
    border-radius: 8px;
    overflow: hidden;
    position: relative; 
  }    
  .progress-enter {  
    height: inherit;
    background: rgba(180, 160, 120, .2); 
  }
  .progress-bg {
    width: 60%; height: inherit;
    border-radius: 6px; 
    background: repeating-linear-gradient(-45deg, #D9CFBB  25%, #C3B393 0, #C3B393 50%,
                    #D9CFBB 0, #D9CFBB 75%, #C3B393 0);
    background-size: 16px 16px;
    animation: panoramic 20s linear infinite;
  }