Can an inline SVG animation be preload/cached?

Question

Working on a gallery in Bootstrap:

<div class="instaRow">
    <div class="col-xs-3">
        <a title="5">
            <div class="fooImg">
                <img class=" img-responsive" src="img/instagram.png" alt="" />
            </div>
        </a>
    </div>
    <div class="col-xs-3">
        <a title="5">
            <div class="fooImg">
                <img class="img-responsive" src="img/instagram.png" alt="" />
            </div>
        </a>
    </div>
    <div class="col-xs-3">
        <a title="6">
            <div class="fooImg">
                <img class="img-responsive" src="img/instagram.png" alt="" />
            </div>
        </a>
    </div>
    <div class="col-xs-3">
        <a title="8">
            <div class="fooImg">
                <img class="img-responsive" src="img/instagram.png" alt="" />
            </div>
        </a>
    </div>
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i></button>
                <h3 class="modal-title">Instagram Image</h3>
            </div>
            <div class="modal-body"></div>
            </div>
        </div>
    </div>
</div>

that will render images from an Instagram JSON pull and I wanted to implement an inline animated SVG while the PHP is creating the JSON file.

SVG:

<div class="pre_loader" title="pre-loader">
 <svg version="1.1" id="theLoader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="-10 -10 68 68">
  <path class="loaderFill" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
   <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1.2s" repeatCount="indefinite" />
  </path>
 </svg>
</div>

However, when I research to see if it's possible, it would appear, from searches, that people use a non-animated SVG file instead of inline SVG:

• Best way to preload SVG image tags?
• Preloading SVG images
• 5 Gotchas You’re Gonna Face Getting Inline SVG Into Production

and I did see an SVG .htaccess approach on an SVG file:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/svg+xml "access plus 1 year"
</IfModule>

but that is still for a file.

In regards to rendering the JSON, I've seen jQuery's demo and several examples use the approach:

(function() {
  var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON( flickerAPI, {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  })
    .done(function( data ) {
      $.each( data.items, function( i, item ) {
        $( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
        if ( i === 3 ) {
          return false;
        }
      });
    });
})();

so I was thinking of using something like:

$(".pre_loader").show();
$.getJSON('instagram.json', function(theJson) {
   $.each(theJson, function() {
      // some code
   });
   $(".pre_loader").hide();  
});

Is there a way to get an inline animated SVG as a pre-loader for my Bootstrap gallery?