diff --git a/lib/components/Spinner.js b/lib/components/Spinner.js
index c606a41..485b4af 100644
--- a/lib/components/Spinner.js
+++ b/lib/components/Spinner.js
@@ -10,23 +10,15 @@ export default class Spinner extends React.Component {
})
return
-
-
-
-

-
- {this.props.name === null ? null
- :
{this.props.name}
}
- {this.props.size === null ? null
- :
{formatSize(this.props.size)}
}
-
-
-
-

-
+

+
+ {this.props.name === null ? null
+ :
{this.props.name}
}
+ {this.props.size === null ? null
+ :
{formatSize(this.props.size)}
}
}
diff --git a/lib/index.styl b/lib/index.styl
index 28a7a72..79d6bc9 100644
--- a/lib/index.styl
+++ b/lib/index.styl
@@ -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 {