fixed spinner issue #6
Conversation
There was a problem hiding this comment.
I can't accept it unfortunately even if you mitigate the comments, because you said that the spinner will not be changed, but it indeed changed. The old spinner was alternating arc size while spinning. The entire bug in #4 was related to that arc-changing animation that doesn't work not rotating itself.
| @@ -76,9 +76,9 @@ <h2>Settings</h2> | |||
| </footer> | |||
| </article> | |||
| <div hidden id="spinner" class="spinner"> | |||
| <svg viewBox="25 25 50 50"> | |||
| <!-- <svg viewBox="25 25 50 50"> | |||
There was a problem hiding this comment.
Committing commented up code isn't a best practise
| @@ -317,17 +317,18 @@ body { | |||
| } | |||
|
|
|||
| .spinner { | |||
There was a problem hiding this comment.
Names in my code may not be clear, but as you can see this spinner class was rather an overlay, it was like this for a reason. Without blocking the whole screen, the user can now, changing settings while the image loads, which can cause major lags.
The svg tag was used for the actual spinner.
There was a problem hiding this comment.
Oh. Thanks for pointing out my mistakes, I am working to remedy them.
The old spinner was alternating arc size while spinning. The entire bug in #4 was related to that arc-changing animation that doesn't work not rotating itself.
Also, I am not able to understand what you mean by alternating arc size. Do you mean changing the arc size while rotating?
There was a problem hiding this comment.
I made the comparison, the same size, the same place on the screen
| original | yours |
|---|---|
 |
 |
As you can see yours is moved slightly and doesn't work like the old one
To achieve centered element using your method it's required to use transform: translate(-50%, -50%) because top and left don't count for element's width and height.
| border-bottom: 10px solid #d65a31; | ||
| width: 100px; | ||
| height: 100px; | ||
| animation: rotate 2s linear infinite; | ||
| } | ||
|
|
||
| .spinner svg { |
This is with regards to issue #4 . In .spinner of styles.css, position, bottom, left are to align the spinner in the center of the screen.
The rest are spinner specifications.