SVG 간단 프로그레스 바 progress bar

HTML - SVG

<div class="wrap">
  <svg width="115" height="22">
    <defs>
      <linearGradient id="progress_bar">
        <stop offset="0" stop-color="#2C75BA">
          <animate dur="0.4s" attributeName="offset" fill="freeze" from="0" to="0.45" />
        </stop>
        <stop offset="0" stop-color="#373b47">
          <animate dur="0.4s" attributeName="offset" fill="freeze" from="0" to="0.45" />
        </stop>  
      </linearGradient>
    </defs>
      <text data-name="100" x="92" y="10">100</text>
      <text data-name="45" x="1" y="10">45</text>
      <rect id="rectangle01" data-name="rec01" x="0" y="16" width="114" height="6" rx="3" fill="url(#progress_bar)"/>
  </svg>
</div>

CSS

.wrap{background-color: #1A253F; padding:1rem; }
svg {display:block; margin:0 auto;}
svg text {font-size:0.75rem; font-family: 'Montserrat', sans-serif; fill:#fff; /*svg text태그는 fill로 해야 color처럼 먹힘 */}

svg progress var