- I wanted to create a skeleton screen using CSS
- For reference, I used the link below: https://css-tricks.com/building-skeleton-screens-css-custom-properties/
- However, when implementing it in my React app, I encountered an issue.
- Although I can see the HTML div code, the CSS changes are not visible.
- I tried debugging by adding borders, but the problem persists.
- Could someone provide guidance on how to resolve this issue?
- Below is my code snippet and sandbox for reference:
Link to Code Not Working: https://stackblitz.com/edit/react-kjhuv7?file=card.scss
.card {
width: 280px;
border: red;
height: var(--card-height);
&:empty::after {
content:"";
display:block;
width: 100%;
height: 100%;
border-radius:6px solid black;
box-shadow: 0 10px 45px rgba(0,0,0, .1);
background-color: brown;
background-image:
linear-gradient(
90deg,
rgba(lightgrey, 0) 0,
rgba(lightgrey, .8) 50%,
rgba(lightgrey, 0) 100%
), //animation blur
var(--title-skeleton), //title
var(--desc-line-skeleton), //desc1
var(--desc-line-skeleton), //desc2
var(--avatar-skeleton), //avatar
var(--footer-skeleton), //footer bar
var(--card-skeleton) //card
;
background-size:
var(--blur-size),
var(--title-width) var(--title-height),
var(--desc-line-1-width) var(--desc-line-height),
var(--desc-line-2-width) var(--desc-line-height),
var(--avatar-size) var(--avatar-size),
100% var(--footer-height),
100% 100%
;
background-position:
-150% 0, //animation
var(--title-position), //title
var(--desc-line-1-position), //desc1
var(--desc-line-2-position), //desc2
var(--avatar-position), //avatar
var(--footer-position), //footer bar
0 0 //card
;
background-repeat: no-repeat;
animation: loading 1.5s infinite;
background-color: black;
}
}
@keyframes loading {
to {
background-position:
350% 0,
var(--title-position),
var(--desc-line-1-position),
var(--desc-line-2-position),
var(--avatar-position),
var(--footer-position),
0 0
;
background-color: yellow;
}
}