Skeleton-bg > change animation by using SVGToBase64

[vuquangpham]

Problem

I have removed the animation of skeleton-bg (the way we did before) because it causes a conflict on pagespeed, more detail at #19.

Solution

• Using animation in SVG and adding it to the background image by using SVG To Base64
• SVG:

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:0.8" />
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="10" height="10" fill="#eee"></rect>
  <rect x="0" y="0" width="1" height="10" fill="url(#grad)">
    <animate
        attributeName="x"
        values="0;10"
        dur="1s"
        repeatCount="indefinite" />
  </rect>
</svg>