animate svg fill like a loading bar

Question

I am trying to animate an svg to fill as if it we loading and I can' t seem to find anything online that has worked yet.

<svg width="302" height="245" viewBox="0 0 302 245" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.281 234C22.281 239.891 17.5054 244.667 11.6144 244.667C5.72336 244.667 0.947723 239.891 0.947723 234C0.947723 228.109 5.72336 223.333 11.6144 223.333C17.5054 223.333 22.281 228.109 22.281 234ZM11.6144 0H275.614V4H11.6144V0ZM301.614 26V210H297.614V26H301.614ZM275.614 236H11.6144V232H275.614V236ZM301.614 210C301.614 224.359 289.974 236 275.614 236V232C287.765 232 297.614 222.15 297.614 210H301.614ZM275.614 0C289.974 0 301.614 11.6406 301.614 26H297.614C297.614 13.8497 287.765 4 275.614 4V0Z" fill="#D9EBCD"/>
<mask id="mask0_2797_493" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="302" height="245">
<path d="M22.281 234C22.281 239.891 17.5054 244.667 11.6144 244.667C5.72336 244.667 0.947723 239.891 0.947723 234C0.947723 228.109 5.72336 223.333 11.6144 223.333C17.5054 223.333 22.281 228.109 22.281 234ZM11.6144 0H275.614V4H11.6144V0ZM301.614 26V210H297.614V26H301.614ZM275.614 236H11.6144V232H275.614V236ZM301.614 210C301.614 224.359 289.974 236 275.614 236V232C287.765 232 297.614 222.15 297.614 210H301.614ZM275.614 0C289.974 0 301.614 11.6406 301.614 26H297.614C297.614 13.8497 287.765 4 275.614 4V0Z" fill="#D9EBCD"/>
</mask>
<g mask="url(#mask0_2797_493)">
</g>
</svg>

that is the svg I want to animate. Thanks for your help.

i tried this...

<svg width="302" height="245" viewBox="0 0 302 245" fill="#D9EBCD" xmlns="http://www.w3.org/2000/svg">
                        <defs>
                            <linearGradient id="green-fill">
                                <stop offset="0" stop-color="#11453B">
                                    <animate dur="4s" attributeName="offset" from="0" to="1" id="myLoop" />
                                </stop>
                                <stop offset="0" stop-color="#D9EBCD">
                                    <animate dur="4s" attributeName="offset" from="0" to="1" />
                                </stop>
                            </linearGradient>
                        </defs>
                        <path d="M22.281 234C22.281 239.891 17.5054 244.667 11.6144 244.667C5.72336 244.667 0.947723 239.891 0.947723 234C0.947723 228.109 5.72336 223.333 11.6144 223.333C17.5054 223.333 22.281 228.109 22.281 234ZM11.6144 0H275.614V4H11.6144V0ZM301.614 26V210H297.614V26H301.614ZM275.614 236H11.6144V232H275.614V236ZM301.614 210C301.614 224.359 289.974 236 275.614 236V232C287.765 232 297.614 222.15 297.614 210H301.614ZM275.614 0C289.974 0 301.614 11.6406 301.614 26H297.614C297.614 13.8497 287.765 4 275.614 4V0Z" fill="#url(green-fill)"/>
                        <mask id="mask0_2797_493" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="302" height="245">
                        <path d="M22.281 234C22.281 239.891 17.5054 244.667 11.6144 244.667C5.72336 244.667 0.947723 239.891 0.947723 234C0.947723 228.109 5.72336 223.333 11.6144 223.333C17.5054 223.333 22.281 228.109 22.281 234ZM11.6144 0H275.614V4H11.6144V0ZM301.614 26V210H297.614V26H301.614ZM275.614 236H11.6144V232H275.614V236ZM301.614 210C301.614 224.359 289.974 236 275.614 236V232C287.765 232 297.614 222.15 297.614 210H301.614ZM275.614 0C289.974 0 301.614 11.6406 301.614 26H297.614C297.614 13.8497 287.765 4 275.614 4V0Z" fill="#D9EBCD"/>
                        </mask>
                        <g mask="url(#mask0_2797_493)">
                        </g>
                    </svg>

because i found it online but it didn't work.

Answer 1

Is it something like this? The shape is made using a mask on a rectangle. Inside the mask there is a path with a wide stroke, covering the path of the shape. Animating the path will "reveal" the white part of the mask.

<svg height="95vh" viewBox="0 0 302 245" fill="#D9EBCD" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="mask01">
      <path d="M22.281 234C22.281 239.891 17.5054 244.667 11.6144 244.667 5.7234 244.667.9477 239.891.9477 234 .9477 228.109 5.7234 223.333 11.6144 223.333 17.5054 223.333 22.281 228.109 22.281 234ZM11.6144 0H275.614V4H11.6144V0ZM301.614 26V210H297.614V26H301.614ZM275.614 236H11.6144V232H275.614V236ZM301.614 210C301.614 224.359 289.974 236 275.614 236V232C287.765 232 297.614 222.15 297.614 210H301.614ZM275.614 0C289.974 0 301.614 11.6406 301.614 26H297.614C297.614 13.8497 287.765 4 275.614 4V0Z"
        fill="white"/>
      <path d="M 10 2 H 276 C 288 2 300 12 300 26 
        V 210 C 300 220 292 234 276 234 H 0" stroke="black"
        stroke-width="25" fill="none" stroke-dasharray="100 100"
        pathLength="100">
        <animate dur="4s" attributeName="stroke-dasharray"
        from="100 100" to="0 100" fill="freeze" />
      </path>
    </mask>
  </defs>               
  <rect width="302" height="245" mask="url(#mask01)" fill="#D9EBCD" />                   
</svg>