# depicter/trunk/resources/scripts/loadings/snippets/grid/light.html

Depicter — Popup & Slider Builder, version trunk. 93 lines.

- Page: https://pluginprobe.com/plugins/depicter/trunk/code/resources/scripts/loadings/snippets/grid/light.html
- Raw: https://pluginprobe.com/plugins/depicter/trunk/raw/resources/scripts/loadings/snippets/grid/light.html
- Modified: 2022-06-01T06:26:20+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/depicter/trunk/code/resources/scripts/loadings/snippets/grid/light.html#L10-L20`.

```html
<svg class="depicter-single-svg-loading" viewBox="0 0 105 105" xmlns="http://www.w3.org/2000/svg" fill="#fff">
   <circle cx="12.5" cy="12.5" r="12.5">
      <animate
         attributeName="fill-opacity"
         begin="0s"
         dur="1s"
         values="1;.2;1"
         calcMode="linear"
         repeatCount="indefinite"
      />
   </circle>
   <circle cx="12.5" cy="52.5" r="12.5" fill-opacity=".5">
      <animate
         attributeName="fill-opacity"
         begin="100ms"
         dur="1s"
         values="1;.2;1"
         calcMode="linear"
         repeatCount="indefinite"
      />
   </circle>
   <circle cx="52.5" cy="12.5" r="12.5">
      <animate
         attributeName="fill-opacity"
         begin="300ms"
         dur="1s"
         values="1;.2;1"
         calcMode="linear"
         repeatCount="indefinite"
      />
   </circle>
   <circle cx="52.5" cy="52.5" r="12.5">
      <animate
         attributeName="fill-opacity"
         begin="600ms"
         dur="1s"
         values="1;.2;1"
         calcMode="linear"
         repeatCount="indefinite"
      />
   </circle>
   <circle cx="92.5" cy="12.5" r="12.5">
      <animate
         attributeName="fill-opacity"
         begin="800ms"
         dur="1s"
         values="1;.2;1"
         calcMode="linear"
         repeatCount="indefinite"
      />
   </circle>
   <circle cx="92.5" cy="52.5" r="12.5">
      <animate
         attributeName="fill-opacity"
         begin="400ms"
         dur="1s"
         values="1;.2;1"
         calcMode="linear"
         repeatCount="indefinite"
      />
   </circle>
   <circle cx="12.5" cy="92.5" r="12.5">
      <animate
         attributeName="fill-opacity"
         begin="700ms"
         dur="1s"
         values="1;.2;1"
         calcMode="linear"
         repeatCount="indefinite"
      />
   </circle>
   <circle cx="52.5" cy="92.5" r="12.5">
      <animate
         attributeName="fill-opacity"
         begin="500ms"
         dur="1s"
         values="1;.2;1"
         calcMode="linear"
         repeatCount="indefinite"
      />
   </circle>
   <circle cx="92.5" cy="92.5" r="12.5">
      <animate
         attributeName="fill-opacity"
         begin="200ms"
         dur="1s"
         values="1;.2;1"
         calcMode="linear"
         repeatCount="indefinite"
      />
   </circle>
</svg>

```