Deepali has uploaded a new change for review. https://gerrit.wikimedia.org/r/116225
Change subject: Add vector svg animated spinner icon ...................................................................... Add vector svg animated spinner icon Add svg spinner icon with compatible size Bug: 59699 Change-Id: Ie38b93901edbcafd5c55e13bb82fbfdd82c8f10c --- A resources/jquery/images/spinner-large.svg A resources/jquery/images/spinner.svg M resources/jquery/jquery.spinner.css 3 files changed, 61 insertions(+), 2 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core refs/changes/25/116225/1 diff --git a/resources/jquery/images/spinner-large.svg b/resources/jquery/images/spinner-large.svg new file mode 100644 index 0000000..62c4e49 --- /dev/null +++ b/resources/jquery/images/spinner-large.svg @@ -0,0 +1,31 @@ +<?xml version='1.0' standalone='no'?> +<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'> +<!-- Generated with svg-spin generator script from Robert Fleischmann (http://github.com/rendro/SVG-Spinner) --> +<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32px' height='32px'> + <g> +<ellipse fill="black" transform='rotate(0, 16, 4)' cx='16' cy='4' rx='4' ry='4' style='opacity:0;'> + <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.9s' repeatCount='indefinite' begin='0s' /> +</ellipse> +<ellipse fill="black" transform='rotate(45, 24.4853, 7.5147)' cx='24.4853' cy='7.5147' rx='4' ry='4' style='opacity:0;'> + <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.9s' repeatCount='indefinite' begin='0.1125s' /> +</ellipse> +<ellipse fill="black" transform='rotate(90, 28, 16)' cx='28' cy='16' rx='4' ry='4' style='opacity:0;'> + <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.9s' repeatCount='indefinite' begin='0.225s' /> +</ellipse> +<ellipse fill="black" transform='rotate(135, 24.4853, 24.4853)' cx='24.4853' cy='24.4853' rx='4' ry='4' style='opacity:0;'> + <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.9s' repeatCount='indefinite' begin='0.3375s' /> +</ellipse> +<ellipse fill="black" transform='rotate(180, 16, 28)' cx='16' cy='28' rx='4' ry='4' style='opacity:0;'> + <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.9s' repeatCount='indefinite' begin='0.45s' /> +</ellipse> +<ellipse fill="black" transform='rotate(225, 7.5147, 24.4853)' cx='7.5147' cy='24.4853' rx='4' ry='4' style='opacity:0;'> + <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.9s' repeatCount='indefinite' begin='0.5625s' /> +</ellipse> +<ellipse fill="black" transform='rotate(270, 4, 16)' cx='4' cy='16' rx='4' ry='4' style='opacity:0;'> + <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.9s' repeatCount='indefinite' begin='0.675s' /> +</ellipse> +<ellipse fill="black" transform='rotate(315, 7.5147, 7.5147)' cx='7.5147' cy='7.5147' rx='4' ry='4' style='opacity:0;'> + <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.9s' repeatCount='indefinite' begin='0.7875s' /> +</ellipse> + </g> +</svg> diff --git a/resources/jquery/images/spinner.svg b/resources/jquery/images/spinner.svg new file mode 100644 index 0000000..1d0ca8c --- /dev/null +++ b/resources/jquery/images/spinner.svg @@ -0,0 +1,28 @@ +<?xml version='1.0' standalone='no'?> +<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'> +<!-- Generated with svg-spin generator script from Robert Fleischmann (http://github.com/rendro/SVG-Spinner) --> +<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='20px' height='20px'> + <g> +<ellipse fill="black" transform='rotate(0, 10, 2.8)' cx='10' cy='2.8' rx='2.8' ry='2.8' style='opacity:0;'> + <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.9s' repeatCount='indefinite' begin='0s' /> +</ellipse> +<ellipse fill="black" transform='rotate(51.42857142857143, 15.6292, 5.5109)' cx='15.6292' cy='5.5109' rx='2.8' ry='2.8' style='opacity:0;'> + <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.9s' repeatCount='indefinite' begin='0.1286s' /> +</ellipse> +<ellipse fill="black" transform='rotate(102.85714285714286, 17.0195, 11.6022)' cx='17.0195' cy='11.6022' rx='2.8' ry='2.8' style='opacity:0;'> + <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.9s' repeatCount='indefinite' begin='0.2571s' /> +</ellipse> +<ellipse fill="black" transform='rotate(154.28571428571428, 13.124, 16.487)' cx='13.124' cy='16.487' rx='2.8' ry='2.8' style='opacity:0;'> + <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.9s' repeatCount='indefinite' begin='0.3857s' /> +</ellipse> +<ellipse fill="black" transform='rotate(205.71428571428572, 6.876, 16.487)' cx='6.876' cy='16.487' rx='2.8' ry='2.8' style='opacity:0;'> + <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.9s' repeatCount='indefinite' begin='0.5143s' /> +</ellipse> +<ellipse fill="black" transform='rotate(257.14285714285717, 2.9805, 11.6022)' cx='2.9805' cy='11.6022' rx='2.8' ry='2.8' style='opacity:0;'> + <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.9s' repeatCount='indefinite' begin='0.6429s' /> +</ellipse> +<ellipse fill="black" transform='rotate(308.57142857142856, 4.3708, 5.5109)' cx='4.3708' cy='5.5109' rx='2.8' ry='2.8' style='opacity:0;'> + <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.9s' repeatCount='indefinite' begin='0.7714s' /> +</ellipse> + </g> +</svg> diff --git a/resources/jquery/jquery.spinner.css b/resources/jquery/jquery.spinner.css index a9e06db..0f2a513 100644 --- a/resources/jquery/jquery.spinner.css +++ b/resources/jquery/jquery.spinner.css @@ -6,7 +6,7 @@ .mw-spinner-small { /* @embed */ - background-image: url(images/spinner.gif); + background-image: url(images/spinner.svg); height: 20px; width: 20px; /* Avoid issues with .mw-spinner-block when floated without width. */ @@ -15,7 +15,7 @@ .mw-spinner-large { /* @embed */ - background-image: url(images/spinner-large.gif); + background-image: url(images/spinner-large.svg); height: 32px; width: 32px; /* Avoid issues with .mw-spinner-block when floated without width. */ -- To view, visit https://gerrit.wikimedia.org/r/116225 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Ie38b93901edbcafd5c55e13bb82fbfdd82c8f10c Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/core Gerrit-Branch: master Gerrit-Owner: Deepali <djdeepalijain...@gmail.com> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
