I wanted to animate a graphic. It should be like an diagramm loader. I dont know what i need to type in so it starts where the diagramm starts and not before.

I once made a diagramm loader so i decided to pretty much use the same code. Here is the code for the diagramm loader:

<div class="loader loader--style4" title="3">
  <svg version="1.1" id="Layer_1" xmlns="" xmlns:xlink="" x="0px" y="0px"
     width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    
   
    <rect x="0" y="5" width="5" height="40" fill="#333">
      <animateTransform  attributeType="xml"
        attributeName="transform" type="scale"
        values="1,1; 1,3; 1,1"
        begin="0s" dur="1s" repeatCount="indefinite" />       
    </rect>

    <rect x="10" y="5" width="5" height="40" fill="#333">
      <animateTransform  attributeType="xml"
        attributeName="transform" type="scale"
        values="1,1; 1,3; 1,1"
        begin="0.2s" dur="1s" repeatCount="indefinite" />       
    </rect>
    <rect x="20" y="5" width="5" height="40" fill="#333">
      <animateTransform  attributeType="xml"
        attributeName="transform" type="scale"
        values="1,1; 1,3; 1,1"
        begin="0.4s" dur="1s" repeatCount="indefinite" />       
    </rect>
  </svg>
</div>