MyCrypto/common/components/ui/Spinner.scss
James Prado 0d5d0cea9a Wallet Loading States & Spinner Update (#334)
* Add disclaimer modal to footer

* Remove duplicate code & unnecessary styles

* Fix formatting noise

* remove un-used css style

* Fix tslint error & add media query for modals

* Nest Media Query

* Replace '???' with Spinner & update spinner

* Add loading states for wallet balances

* Update wallet test

* Remove excess data passed to wallet balance reducer & Fix wallet balance types

* Merge 'develop' into 'loading-indicator'

* Add 'light' prop to Spinner

* Only show spinners when fetching data

* Remove format diff

* Apply naming conventions

* Remove network name when offline
2017-11-14 21:44:55 -06:00

67 lines
795 B
SCSS

.Spinner {
animation: rotate 2s linear infinite;
&-x1 {
height: 1em;
width: 1em;
}
&-x2 {
height: 2em;
width: 2em;
}
&-x3 {
height: 3em;
width: 3em;
}
&-x4 {
height: 4em;
width: 4em;
}
&-x5 {
height: 5em;
width: 5em;
}
& .path {
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
&-light {
& .path {
stroke: white;
}
}
&-dark {
& .path {
stroke: #163151;
}
}
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}