Fix spinner css

Use a rotating css background image instead of a separate element placed 
behind

This allows flexbox to function correctly
pull/97/head
KayleePop 7 years ago
parent 330c00778f
commit 42234dd145
No known key found for this signature in database
GPG Key ID: 110C2E0CFBFC06FA

@ -10,9 +10,6 @@ export default class Spinner extends React.Component {
})
return <div className={classes}>
<div className="spinner-content">
<img
alt={this.props.name || this.props.dir}
src={`/images/${this.props.dir}.png`}
@ -22,11 +19,6 @@ export default class Spinner extends React.Component {
: <div className="spinner-name">{this.props.name}</div>}
{this.props.size === null ? null
: <div className="spinner-size">{formatSize(this.props.size)}</div>}
</div>
<img src="/images/pizza.png" className="spinner-background" />
</div>
}

@ -82,10 +82,6 @@ p {
}
}
.container {
height: 100vh
}
.page {
display: flex
flex-direction: column;
@ -121,35 +117,32 @@ p {
}
.spinner {
position: relative
z-index: -1
width: 300px
height: 300px
min-height: 300px
margin: 0 auto 20px
display: flex
flex-direction: column
align-items: center
align-content: center
justify-content: center
.spinner-background {
display: block
&:before {
background: url(/images/pizza.png) center center / 300px 300px no-repeat
content: ""
position: absolute
width: 300px
height: 300px
position: absolute
top: 0
left: 0
transition: transform 1s
z-index: -1
}
&.spinner-animated .spinner-background {
&.spinner-animated:before {
animation: rotate 5s infinite linear
}
.spinner-image {
display: block
width: 150px
margin: 0 auto
width: 50%
}
.spinner-name {
@ -160,8 +153,6 @@ p {
text-overflow: ellipsis
white-space: nowrap
margin-top: 10px
margin: 0 auto
width: 220px
}
.spinner-size {

Loading…
Cancel
Save