🚀 Usage
Use the following steps to use the Nx Svelte SVG Loaders in your Svelte project.
Import​
Import selected Nx{SELECTED}Loader
component into your component or module and then use with <Nx{SELECTED}Loader>
tag.
app.svelte
<script lang="ts">
import { NxOvalLoader } from '@ngeenx/nx-svelte-svg-loaders';
// ..
let isLoading = true;
</script>
<div>
<!-- ... -->
<NxOvalLoader {isLoading} size={40} />
<!-- ... -->
</div>
<style lang="scss">
// ...
</style>
Coloring​
You can set custom color to the loader by passing style.color
prop to the loader component or any parent element.
SVG loader will inherit the color from the parent element with currentColor
value.
app.svelte
<div>
<!-- ... -->
<NxOvalLoader {isLoading} size={40} style="color: orange" />
<!-- or -->
<NxOvalLoader {isLoading} size={40} class="text-orange-500" />
<!-- ... -->
</div>
Alignment​
You can set horizontal alignment to the loader by passing isCentered
prop to the loader component.
First you need to import the styles in your styles.scss
or App.tsx
file (also see source code of the styles.css).
app.css
...
@import "@ngeenx/nx-svelte-svg-loaders/styles.css";
...
Then you can use the isCentered
prop in your component.
app.svelte
<div>
<NxHeartsLoader isLoading={true} size={100} isCentered={true} />
</div>