I am trying to replicate the page loading template from here

HTML

<div >
  <div >
    <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 >
    <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);
    }
  }
}

CodePudding user response：

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 >
    <div >
        <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 >
        <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>