Commit cd9629ef authored by Petter Goksøyr Åsen's avatar Petter Goksøyr Åsen
Browse files

patorn-client: add spinner css

parent 0ea18eec
......@@ -105,9 +105,7 @@ class PaymentResponse extends React.Component {
if (this.props.isSavingPayment || this.props.isRequestingLoansAndReservations) {
return (
<div style={{textAlign: 'center'}}>
<span data-automation-id="is_searching" className="loading-spinner">
<i className="icon-spin4 animate-spin" style={{color: 'red', fontSize: '2em'}} />
</span>
<span data-automation-id="is_searching" className="loading-spinner"></span>
</div>
)
}
......
......@@ -588,9 +588,7 @@ class UserLoans extends React.Component {
if (this.props.isRequestingLoansAndReservations) {
return <div style={{textAlign: 'center'}}>
<span data-automation-id="is_searching" className="loading-spinner">
<i className="icon-spin4 animate-spin" style={{color: 'red', fontSize: '2em'}} />
</span>
<span data-automation-id="is_searching" className="loading-spinner"></span>
</div>
} else if (this.props.loansAndReservationError) {
return <FormattedMessage {...messages.loansAndReservationError} />
......
......@@ -436,8 +436,31 @@ img.icon-tall {
transition: opacity 500ms ease-in;
}
.loading-spinner i {
color: $redColor;
.loading-spinner {
display: inline-block;
width: 64px;
height: 64px;
}
.loading-spinner:after {
content: " ";
display: block;
width: 46px;
height: 46px;
margin: 1px;
border-radius: 50%;
border: 5px solid #000;
border-color: #000 transparent #000 transparent;
animation: spinner 1.2s linear infinite;
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment