Improve the look of the spinner (#6083)
This commit is contained in:
Šimon Brandner
GitHub
parent
73731cc478
commit
f643839a00
5 changed files with 32 additions and 101 deletions
|
|
@ -24,5 +24,5 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_InlineSpinner_icon {
|
||||
display: inline-block;
|
||||
display: inline-block !important; // Override regular mx_Spinner_icon
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
|
@ -37,8 +38,28 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_Spinner_icon {
|
||||
background-color: $primary-content;
|
||||
mask: url('$(res)/img/spinner.svg');
|
||||
mask-size: contain;
|
||||
animation: 1.1s steps(12, end) infinite spin;
|
||||
background-color: $quinary-content;
|
||||
mask: url('$(res)/img/spinner/spinner-background.svg');
|
||||
mask-size: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&::before {
|
||||
background-color: $secondary-content;
|
||||
mask: url('$(res)/img/spinner/spinner-foreground.svg');
|
||||
mask-size: 100%;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
content: "";
|
||||
display: flex;
|
||||
|
||||
animation: 1s linear spin infinite;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,96 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="128"
|
||||
height="128"
|
||||
viewBox="0 0 33.866666 33.866668"
|
||||
version="1.1"
|
||||
id="svg920"
|
||||
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
|
||||
sodipodi:docname="spinner.svg">
|
||||
<defs
|
||||
id="defs914" />
|
||||
<metadata
|
||||
id="metadata917">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
style="stroke-width:0;fill-opacity:0.30000001"
|
||||
d="M 59,95.605469 V 123 c 0,2.77 2.23,5 5,5 2.77,0 5,-2.23 5,-5 V 95.605469 A 31.999998,31.999998 0 0 1 64,96 31.999998,31.999998 0 0 1 59,95.605469 Z"
|
||||
transform="scale(0.26458333)"
|
||||
id="path2350" />
|
||||
<path
|
||||
style="stroke-width:0;fill-opacity:0.7020452"
|
||||
d="M 64,0 C 61.23,0 59,2.2300001 59,5 V 32.394531 A 31.999998,31.999998 0 0 1 64,32 31.999998,31.999998 0 0 1 69,32.394531 V 5 C 69,2.2300001 66.77,0 64,0 Z"
|
||||
transform="scale(0.26458333)"
|
||||
id="rect2283" />
|
||||
<path
|
||||
style="stroke-width:0;fill-opacity:0.30000001"
|
||||
d="M 43.867188,88.871094 30.169922,112.5957 c -1.385,2.39889 -0.568812,5.44508 1.830078,6.83008 2.39889,1.385 5.445078,0.56881 6.830078,-1.83008 L 52.527344,93.873047 a 31.999998,31.999998 0 0 1 -8.660156,-5.001953 z"
|
||||
transform="scale(0.26458333)"
|
||||
id="path2346" />
|
||||
<path
|
||||
style="stroke-width:0;fill-opacity:0.80019373"
|
||||
d="m 93.150391,7.9121094 c -1.599848,0.111837 -3.114844,0.992881 -3.980469,2.4921876 L 75.472656,34.126953 a 31.999998,31.999998 0 0 1 8.660156,5.001953 L 97.830078,15.404297 C 99.215078,13.005407 98.39889,9.9592187 96,8.5742188 95.100416,8.0548438 94.110299,7.8450072 93.150391,7.9121094 Z"
|
||||
transform="scale(0.26458333)"
|
||||
id="rect2285" />
|
||||
<path
|
||||
style="stroke-width:0;fill-opacity:0.30000001"
|
||||
d="M 34.126953,75.474609 10.404297,89.169922 C 8.0054066,90.554922 7.1892188,93.60111 8.5742188,96 c 1.3849999,2.39889 4.4311882,3.215078 6.8300782,1.830078 L 39.128906,84.132812 a 31.999998,31.999998 0 0 1 -5.001953,-8.658203 z"
|
||||
transform="scale(0.26458333)"
|
||||
id="path2342" />
|
||||
<path
|
||||
style="stroke-width:0;fill-opacity:0.90226436"
|
||||
d="m 115.44531,29.507812 c -0.95991,-0.0671 -1.95002,0.142735 -2.84961,0.66211 L 88.871094,43.867188 a 31.999998,31.999998 0 0 1 5.001953,8.658203 L 117.5957,38.830078 c 2.39889,-1.385 3.21508,-4.431188 1.83008,-6.830078 -0.86562,-1.499306 -2.38062,-2.38035 -3.98047,-2.492188 z"
|
||||
transform="scale(0.26458333)"
|
||||
id="rect2287" />
|
||||
<path
|
||||
style="stroke-width:0;fill-opacity:1"
|
||||
d="M 95.605469,59 A 31.999998,31.999998 0 0 1 96,64 31.999998,31.999998 0 0 1 95.605469,69 H 123 c 2.77,0 5,-2.23 5,-5 0,-2.77 -2.23,-5 -5,-5 z"
|
||||
transform="scale(0.26458333)"
|
||||
id="path2338" />
|
||||
<path
|
||||
style="stroke-width:0;fill-opacity:0.40288368"
|
||||
d="m 5,59 c -2.7699999,0 -5,2.23 -5,5 0,2.77 2.2300001,5 5,5 H 32.394531 A 31.999998,31.999998 0 0 1 32,64 31.999998,31.999998 0 0 1 32.394531,59 Z"
|
||||
transform="scale(0.26458333)"
|
||||
id="rect2289" />
|
||||
<path
|
||||
style="stroke-width:0;fill-opacity:0.30000001"
|
||||
d="m 93.873047,75.472656 a 31.999998,31.999998 0 0 1 -5.001953,8.660156 L 112.5957,97.830078 c 2.39889,1.385 5.44508,0.568812 6.83008,-1.830078 1.385,-2.39889 0.56881,-5.445078 -1.83008,-6.830078 z"
|
||||
transform="scale(0.26458333)"
|
||||
id="path2334" />
|
||||
<path
|
||||
style="stroke-width:0;fill-opacity:0.49898377"
|
||||
d="M 12.554688,29.507812 C 10.95484,29.61965 9.4398437,30.500694 8.5742188,32 c -1.385,2.39889 -0.5688122,5.445078 1.8300782,6.830078 l 23.722656,13.697266 a 31.999998,31.999998 0 0 1 5.001953,-8.660156 L 15.404297,30.169922 c -0.899584,-0.519375 -1.889701,-0.729212 -2.849609,-0.66211 z"
|
||||
transform="scale(0.26458333)"
|
||||
id="rect2291" />
|
||||
<path
|
||||
style="stroke-width:0;fill-opacity:0.30000001"
|
||||
d="m 84.132812,88.871094 a 31.999998,31.999998 0 0 1 -8.658203,5.001953 L 89.169922,117.5957 c 1.385,2.39889 4.431188,3.21508 6.830078,1.83008 2.39889,-1.385 3.215078,-4.43119 1.830078,-6.83008 z"
|
||||
transform="scale(0.26458333)"
|
||||
id="path2330" />
|
||||
<path
|
||||
style="stroke-width:0;fill-opacity:0.5998317"
|
||||
d="M 34.849609,7.9121094 C 33.889701,7.8450072 32.899584,8.0548438 32,8.5742188 29.60111,9.9592187 28.784922,13.005407 30.169922,15.404297 l 13.697266,23.724609 a 31.999998,31.999998 0 0 1 8.658203,-5.001953 L 38.830078,10.404297 C 37.964453,8.9049904 36.449457,8.0239464 34.849609,7.9121094 Z"
|
||||
transform="scale(0.26458333)"
|
||||
id="rect2293" />
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 5.1 KiB |
3
res/img/spinner/spinner-background.svg
Normal file
3
res/img/spinner/spinner-background.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="15" cy="15" r="14" stroke="#E3E8F0" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 170 B |
3
res/img/spinner/spinner-foreground.svg
Normal file
3
res/img/spinner/spinner-foreground.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M29 15C29 12.4307 28.293 9.91095 26.9563 7.7167C25.6197 5.52246 23.705 3.73836 21.4219 2.55979C19.1389 1.38123 16.5755 0.853662 14.0126 1.03487C11.4497 1.21607 8.98611 2.09906 6.8916 3.58713" stroke="#737D8C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 387 B |
Loading…
Reference in a new issue