# depicter/trunk/resources/scripts/loadings/snippets/rings/dark.html

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

- Page: https://pluginprobe.com/plugins/depicter/trunk/code/resources/scripts/loadings/snippets/rings/dark.html
- Raw: https://pluginprobe.com/plugins/depicter/trunk/raw/resources/scripts/loadings/snippets/rings/dark.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/rings/dark.html#L10-L20`.

```html
<svg class="depicter-single-svg-loading" viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg" stroke="#050A0E">
   <g fill="none" fill-rule="evenodd" transform="translate(1 1)" stroke-width="2">
      <circle cx="22" cy="22" r="6" stroke-opacity="0">
         <animate attributeName="r" begin="1.5s" dur="3s" values="6;22" calcMode="linear" repeatCount="indefinite" />
         <animate
            attributeName="stroke-opacity"
            begin="1.5s"
            dur="3s"
            values="1;0"
            calcMode="linear"
            repeatCount="indefinite"
         />
         <animate
            attributeName="stroke-width"
            begin="1.5s"
            dur="3s"
            values="2;0"
            calcMode="linear"
            repeatCount="indefinite"
         />
      </circle>
      <circle cx="22" cy="22" r="6" stroke-opacity="0">
         <animate attributeName="r" begin="3s" dur="3s" values="6;22" calcMode="linear" repeatCount="indefinite" />
         <animate
            attributeName="stroke-opacity"
            begin="3s"
            dur="3s"
            values="1;0"
            calcMode="linear"
            repeatCount="indefinite"
         />
         <animate
            attributeName="stroke-width"
            begin="3s"
            dur="3s"
            values="2;0"
            calcMode="linear"
            repeatCount="indefinite"
         />
      </circle>
      <circle cx="22" cy="22" r="8">
         <animate
            attributeName="r"
            begin="0s"
            dur="1.5s"
            values="6;1;2;3;4;5;6"
            calcMode="linear"
            repeatCount="indefinite"
         />
      </circle>
   </g>
</svg>

```