Specify child in a parent in svelte - css

Question

I am trying to replicate the page loading template from here
HTML
<div class="loading">
<div class="loading__ring">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><path>...../path></svg>
</div>
<div class="loading__ring">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><path>......</path></svg>
</div>
</div>
Normal CSS style
/* Demo */
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(#ecf0f1, #fff);
}
/* Animation */
#keyframes rotate {
to {
transform: rotate(360deg);
}
}
/* Variables */
$loader-size: 100px;
/* Loading Icon */
.loading {
width: $loader-size;
height: $loader-size;
&__ring {
position: absolute;
width: $loader-size;
height: $loader-size;
&:first-child {
transform: skew(30deg,20deg);
}
&:last-child {
transform: skew(-30deg,-20deg) scale(-1, 1);
svg {
animation-delay: -0.5s;
}
}
svg {
animation: rotate 1s linear infinite;
fill: rgba(0, 0, 0, 0.2);
}
}
}
I tried to alter into the svelte style by using example specifying child like .loading:global(loading__ring) but this is exactly where I am getting the error saying
Internal server error: /Users/mypc/Documents/testingsveltenvite/v2/src/App.svelte:18:2 Identifier is expected
How do I alter specifying child &__ringor.loading:global(loading__ring) and &:first-child in svelte
/* Loading Icon */
.loading {
width: var(--size);
height: var(--size);
.loading:global(loading__ring) {
position: absolute;
width: var(--size);
height: var(--size);
&:first-child {
transform: skew(130deg,15deg);
}
&:last-child {
transform: skew(-130deg,-1deg) scale(-1, 1);
svg {
animation-delay: -0.91s;
}
}
svg {
animation: rotate 4s linear infinite;
fill: rgba(0, 0, 0, 0.2);
}
}
}

Answer 1

I don't see why you would need the :global() flag, if you have everything inside one component REPL - only the scss has to be converted to normal css (or scss added to the Svelte project)
(the body tag here needs the :global(body) because it's not in the component scope. If you want to make this a loading component, you would probably better add a background element and style this instead)
<script>
import {path} from './path'
</script>
<div class="loading">
<div class="loading__ring">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
{#html path}
</svg>
</div>
<div class="loading__ring">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
{#html path}
</svg>
</div>
</div>
<style>
:global(body) {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(#ecf0f1, #fff);
}
/* Animation */
#keyframes rotate {
to {
transform: rotate(360deg);
}
}
/* Variables */
:root {
--size: 100px;
}
/* Loading Icon */
.loading {
width: var(--size);
height: var(--size);
}
.loading__ring {
position: absolute;
width: var(--size);
height: var(--size);
}
.loading__ring:first-child {
transform: skew(30deg,20deg);
}
.loading__ring:last-child {
transform: skew(-30deg,-20deg) scale(-1, 1);
}
.loading__ring:last-child svg {
animation-delay: -0.5s;
}
.loading__ring svg {
animation: rotate 1s linear infinite;
fill: rgba(0, 0, 0, 0.2);
}
</style>