I'm trying to implement a spinner as a React component, but I'm facing difficulties applying the SCSS file to it.
Here is a snippet of my loading.scss file:
$color: #e14eca;
$size: 12px;
$time: 1;
main {
display: flex;
justify-content: center;
align-items: center;
background: none;
}
.dank-ass-loader {
display: flex;
flex-direction: column;
align-items: center;
.row {
display: flex;
}
}
.arrow {
width: 0;
height: 0;
margin: 0 (-$size / 2);
border-left: $size solid transparent;
border-right: $size solid transparent;
border-bottom: ($size * 1.8) solid $color;
animation: blink $time + s infinite;
filter: drop-shadow(0 0 ($size * 1.5) $color);
&.down {
transform: rotate(180deg);
}
@for $i from 1 through 18 {
&.outer#{$i} {
animation-delay: -($time / 18) * $i + s;
}
}
@for $i from 1 through 6 {
&.inner#{$i} {
animation-delay: -($time / 6) * $i + s;
}
}
}
And here is my React file:
import React from "react";
import styles from "loading.scss";
const Spinner = () => {
return (
<> <main>
<div
className="dank-ass-Spinner"
style={{
position: "fixed",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
top: "50%",
right: "50%",
left: "50%",
zIndex: "99999",
bottom: "50%"
}}
><div className={styles.row} style={{ flexWrap: "nowrap" }}>
<div
className={[
styles.arrow,
styles.up,
styles.outer,
styles.outer18
].join(" ")}
></div>
<div
className={[
styles.arrow,
styles.down,
styles.outer,
styles.outer17
].join(" ")}
></div>
<div
className={[
styles.arrow,
styles.up,
styles.outer,
styles.outer16
].join(" ")}
></div>
<div
className={[
styles.arrow,
styles.down,
styles.outer,
styles.outer15
].join(" ")}
></div>
<div
className={[
styles.arrow,
styles.up,
styles.outer,
styles.outer14
].join(" ")}
></div>
....(remaining content is similar to the original text)
Any idea why I'm only seeing a bunch of empty class divs instead of the spinner animation in my React component?