I want to include an animation when the application's modules are loading for the first time.
I have attempted to use an image, but I am unable to add an animation to it.
Adding a CSS file did not always work as expected.
I then tried utilizing an SVG image and inserting animateTransform into the SVG element.
However, this approach also failed.
Do you have any suggestions on how to successfully add an animation to the image?
Below is the body code from my index.html file.
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app">
<div id="loading__container">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 86.03 67.01"
class="img-logo"
style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100px;">
<defs>
...
</defs>
<g class="cls-1">
<animateTransform
attributeName="transform"
attributeType="XML"
type="scale"
additive="sum"
keyTimes="0;0.5;1"
values="0.5;1;0.5"
dur="1s"
repeatCount="indefinite"/>
<g id="Layer_2" data-name="Layer 2">
...
</g>
</g>
</svg>
</div>
</div>
<!-- built files will be auto injected -->