Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[common] combined loader's svg

Browse source
This commit is contained in:
Maxim Kadushkin 2020-11-10 10:51:34 +03:00
parent 2b50ca8cbd
commit 7afa349870
3 changed files with 20 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
apps/common/main/resources/img/load-mask/loading-small.svg
View file

@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20">
<circle cx="10" cy="10" fill="none" stroke="#444" stroke-width="1.5" r="7.25" stroke-dasharray="160%, 40%">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 10 10;360 10 10" keyTimes="0;1"/>
</circle>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 393 B

23
apps/common/main/resources/img/load-mask/loading.svg
View file

@ -1,5 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28px" height="28px" viewBox="0 0 28 28"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="14" cy="14" fill="none" stroke="#fff" stroke-width="1.5" r="10.25" stroke-dasharray="160%, 40%"> <style>
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 14 14;360 14 14" keyTimes="0;1"/> use {display: none}
</circle> use:target {display: inline}
</svg> </style>
<symbol id="middle1" viewBox="0 0 28 28">
<circle cx="14" cy="14" fill="none" stroke="#fff" stroke-width="1.5" r="10.25" stroke-dasharray="160%, 40%">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 14 14;360 14 14" keyTimes="0;1"/>
</circle>
</symbol>
<symbol id="small1" viewBox="0 0 20 20">
<circle cx="10" cy="10" fill="none" stroke="#444" stroke-width="1.5" r="7.25" stroke-dasharray="160%, 40%">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 10 10;360 10 10" keyTimes="0;1"/>
</circle>
</symbol>
<use id="middle" href="#middle1" />
<use id="small" href="#small1" />
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 394 B

After

Width:  |  Height:  |  Size: 943 B

4
apps/common/main/resources/less/loadmask.less
View file

@ -36,7 +36,7 @@
} }
.asc-loadmask-image { .asc-loadmask-image {
background-image: ~"url(@{common-image-const-path}/load-mask/loading.svg)"; background-image: ~"url(@{common-image-const-path}/load-mask/loading.svg#middle)";
height: @loadmask-image-height; height: @loadmask-image-height;
width: @loadmask-image-width; width: @loadmask-image-width;
float: left; float: left;
@ -57,7 +57,7 @@
transform: translate(-50%, 0); transform: translate(-50%, 0);
.asc-loadmask-image { .asc-loadmask-image {
background-image: ~"url(@{common-image-const-path}/load-mask/loading-small.svg)"; background-image: ~"url(@{common-image-const-path}/load-mask/loading.svg#small)";
height: @loadmask-small-image-height; height: @loadmask-small-image-height;
width: @loadmask-small-image-width; width: @loadmask-small-image-width;
} }