add codepen preloader animation to site

Hey i'm trying to add this pre loading animation to my site from code pen, but am not having any luck. 

https://codepen.io/thebabydino/pen/GRqKwqX

is this possible?

thank you 

24 minutes ago, moonlitdesign said:

Hey i'm trying to add this pre loading animation to my site from code pen, but am not having any luck. 

https://codepen.io/thebabydino/pen/GRqKwqX

is this possible?

thank you 

Your code is a mix of CSS and SCSS. 

This is now the corrected code;
 

:root {
    --c0: #e2e2bf;
    --c1: #de6873;
    --d: 8em;
    --t: 1s;
}

body {
    display: grid;
    grid-template: var(--d) / var(--d);
    place-content: center;
    margin: 0;
    height: 100vh;
    background: #2b323c;
}

div, div::before, div::after {
    border-radius: 50%;
    background: linear-gradient(90deg, var(--c0) calc(var(--i, .5)*100%), var(--c1) 0);
}

div {
    display: grid;
    animation: flip calc(2 * var(--t)) steps(1) infinite;
}

div::before, div::after {
    --i: 0;
    grid-area: 1 / 1;
    backface-visibility: hidden;
    transform: rotateY(calc((var(--i) + 1) * .5turn));
    animation: roty var(--t) ease-in-out infinite alternate;
    content: '';
}

div::after {
    --i: 1;
}

@keyframes flip {
    50% {
        transform: scale(-1);
    }
}

@keyframes roty {
    0% {
        transform: rotateY(calc(var(--i) * .5turn));
    }
}


 but are you using a code block/embed block or are you using this animation as part of a loading screen?

48 minutes ago, justinjamesclack said:

Your code is a mix of CSS and SCSS. 

This is now the corrected code;
 

:root {
    --c0: #e2e2bf;
    --c1: #de6873;
    --d: 8em;
    --t: 1s;
}

body {
    display: grid;
    grid-template: var(--d) / var(--d);
    place-content: center;
    margin: 0;
    height: 100vh;
    background: #2b323c;
}

div, div::before, div::after {
    border-radius: 50%;
    background: linear-gradient(90deg, var(--c0) calc(var(--i, .5)*100%), var(--c1) 0);
}

div {
    display: grid;
    animation: flip calc(2 * var(--t)) steps(1) infinite;
}

div::before, div::after {
    --i: 0;
    grid-area: 1 / 1;
    backface-visibility: hidden;
    transform: rotateY(calc((var(--i) + 1) * .5turn));
    animation: roty var(--t) ease-in-out infinite alternate;
    content: '';
}

div::after {
    --i: 1;
}

@keyframes flip {
    50% {
        transform: scale(-1);
    }
}

@keyframes roty {
    0% {
        transform: rotateY(calc(var(--i) * .5turn));
    }
}


 but are you using a code block/embed block or are you using this animation as part of a loading screen?

thank you for your time!! i'm wanting to use it as part of a loading screen - not sure where to put the code for that 🙂

13 minutes ago, moonlitdesign said:

thank you for your time!! i'm wanting to use it as part of a loading screen - not sure where to put the code for that 🙂

Apologies for not getting back sooner, I've been trying to make the animation work, but for some reason the SCSS doesn't like being converted to CSS. Now the animation is all weird and I can't get it to work.

Now if you had pure CSS code, I could make that work as a loading screen no problem. 



 

1 hour ago, justinjamesclack said:

Apologies for not getting back sooner, I've been trying to make the animation work, but for some reason the SCSS doesn't like being converted to CSS. Now the animation is all weird and I can't get it to work.

Now if you had pure CSS code, I could make that work as a loading screen no problem. 



 

 

thank you so much for trying ! i managed to contact the creator with what you said and their reply was this:

"There's an arrow down in the top right corner of the CSS panel. You click it and you get among the options "View Compiled CSS". Alternatively you can just add .css at the end of the CodePen link. Just don't forget to remove the #btn--yp styles, which are strictly for the YouTube link (linking back to this video from CodePen)."

if that helps?

18 hours ago, moonlitdesign said:

thank you so much for trying ! i managed to contact the creator with what you said and their reply was this:

"There's an arrow down in the top right corner of the CSS panel. You click it and you get among the options "View Compiled CSS". Alternatively you can just add .css at the end of the CodePen link. Just don't forget to remove the #btn--yp styles, which are strictly for the YouTube link (linking back to this video from CodePen)."

if that helps?

Could you possibly drop the creator a message and ask if she can place the animation in a div, to be used for a loading screen?