Change default spinning loader to block, with an option for inline layout.
This commit is contained in:
parent
9650f67139
commit
eee7998581
2 changed files with 11 additions and 4 deletions
|
@ -1,8 +1,9 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
import {classes} from "../../Utils";
|
||||||
|
|
||||||
export function SpinningLoader()
|
export function SpinningLoader({ inline }: { inline?: boolean; })
|
||||||
{
|
{
|
||||||
return (
|
return (
|
||||||
<div className={"spinning loader"}></div>
|
<div className={classes("spinning loader", inline ? "inline" : undefined)}></div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
.spinning.loader
|
.spinning.loader
|
||||||
{
|
{
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: block;
|
||||||
margin: 1em;
|
margin: 1em auto;
|
||||||
width: 2.5em;
|
width: 2.5em;
|
||||||
height: 2.5em;
|
height: 2.5em;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
@ -26,6 +26,12 @@
|
||||||
border: 0.3em solid transparent;
|
border: 0.3em solid transparent;
|
||||||
border-bottom-color: var(--primary);
|
border-bottom-color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.inline
|
||||||
|
{
|
||||||
|
display: inline-block;
|
||||||
|
margin: 1em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes spinning-loader-rotation
|
@keyframes spinning-loader-rotation
|
||||||
|
|
Loading…
Reference in a new issue