diff options
| author | Andrew Dolgov <[email protected]> | 2021-03-16 21:32:44 +0300 |
|---|---|---|
| committer | Andrew Dolgov <[email protected]> | 2021-03-16 21:32:44 +0300 |
| commit | a0e41f41a491c4a8e5e737846edaf1a0b31d5367 (patch) | |
| tree | 288687cbf3f714bcf60a0293013c6baf9c72b9b3 /images | |
| parent | 7ec8a6cad0878fd16fc63c9a11d9c7e3ca18a88c (diff) | |
add svg loading indicators
Diffstat (limited to 'images')
| -rw-r--r-- | images/oval.svg | 17 | ||||
| -rw-r--r-- | images/three-dots.svg | 33 |
2 files changed, 50 insertions, 0 deletions
diff --git a/images/oval.svg b/images/oval.svg new file mode 100644 index 000000000..e59d5bf18 --- /dev/null +++ b/images/oval.svg @@ -0,0 +1,17 @@ +<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL --> +<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#257aa7"> + <g fill="none" fill-rule="evenodd"> + <g stroke-width="8" transform="matrix(0.83009609,0,0,0.83009609,4.0582705,4.0582705)"> + <circle stroke-opacity=".5" cx="18" cy="18" r="18"/> + <path d="M 36,18 C 36,8.06 27.94,0 18,0"> + <animateTransform + attributeName="transform" + type="rotate" + from="0 18 18" + to="360 18 18" + dur="1s" + repeatCount="indefinite"/> + </path> + </g> + </g> +</svg> diff --git a/images/three-dots.svg b/images/three-dots.svg new file mode 100644 index 000000000..e724ca05e --- /dev/null +++ b/images/three-dots.svg @@ -0,0 +1,33 @@ +<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL --> +<svg width="120" height="30" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="#257aa7"> + <circle cx="15" cy="15" r="15"> + <animate attributeName="r" from="15" to="15" + begin="0s" dur="0.8s" + values="15;9;15" calcMode="linear" + repeatCount="indefinite" /> + <animate attributeName="fill-opacity" from="1" to="1" + begin="0s" dur="0.8s" + values="1;.5;1" calcMode="linear" + repeatCount="indefinite" /> + </circle> + <circle cx="60" cy="15" r="9" fill-opacity="0.3"> + <animate attributeName="r" from="9" to="9" + begin="0s" dur="0.8s" + values="9;15;9" calcMode="linear" + repeatCount="indefinite" /> + <animate attributeName="fill-opacity" from="0.5" to="0.5" + begin="0s" dur="0.8s" + values=".5;1;.5" calcMode="linear" + repeatCount="indefinite" /> + </circle> + <circle cx="105" cy="15" r="15"> + <animate attributeName="r" from="15" to="15" + begin="0s" dur="0.8s" + values="15;9;15" calcMode="linear" + repeatCount="indefinite" /> + <animate attributeName="fill-opacity" from="1" to="1" + begin="0s" dur="0.8s" + values="1;.5;1" calcMode="linear" + repeatCount="indefinite" /> + </circle> +</svg> |
