Kevin Powell - Community•2mo ago

Fade-away Loading Effect

Hello! So I've been building up this navbar for a while... and yesterday I thought it would be a good idea to add a loading state to it. However, upon putting the final touches, I'm running into a minor inconvenience. I want the loading indicator .navbar-container::after to disappear and come in with the background graident of nav::after. I can do this somewhat with replacing the transparent parameter to the background color, however this makes the navbar not look the best or as easily viewable:

background: radial-gradient(50% 100% at 50% 100%, var(--gray) 0%, transparent 100%);

background: radial-gradient(50% 100% at 50% 100%, var(--gray) 0%, transparent 100%);

⏬

background: radial-gradient(50% 100% at 50% 100%, var(--gray) 0%, var(--background) 100%);

background: radial-gradient(50% 100% at 50% 100%, var(--gray) 0%, var(--background) 100%);

Attached are labelled videos and images of my problem, and I also tried messing with the loading animations but it's not the desired effect. Here is the code in question (Nav.astro):

    .navbar-container {
        position: relative;
        display: flex;
        align-items: center;    
        justify-content: space-between;    
        width: var(--max-width);
        height: 100%;
        padding: 0 50px;
        max-width: var(--max-width);
        overflow: hidden;
    }

        .navbar-middle {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            list-style-type: none;
            font-size: clamp(1.2rem, 2vw, 1.5rem);
            height: 100%;
            width: fit-content;
            overflow: visible;
            padding-left: 48px;
        }

                /* Navbar link selector - Credit to: Kevin Powell (Credits Page) */
                .navbar-middle::after {
                    position: absolute;
                    content: "";
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 1px;
                    scale: var(--_width, 0) 1;
                    translate: var(--_left, 0px) 0;
                    transform-origin: left;
                    background: var(--accent);
                    transition: scale 450ms, translate 450ms; /* Control the speed of the underline */
                    transition-delay: 100ms;
                }

        .navbar-container::after {
            position: absolute;
            content: "";
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            transform: scaleX(var(--_width, 0)) translateX(var(--_left, 0px));
            transform-origin: left;
            background: var(--accent);
        }

            /* Navbar Loading Animations */

            .navbar-container.loading-forward::after { animation: load-forward 2.5s linear infinite; }
            .navbar-container.loading-backward::after { animation: load-backward 2.5s linear infinite; }

            @keyframes load-forward {
                0% { transform: scaleX(0.15) translateX(-100%); }
                100% { transform: scaleX(0.15) translateX(1100%); }
            }

            @keyframes load-backward {
                0% { transform: scaleX(0.15) translateX(1100%); }
                100% { transform: scaleX(0.15) translateX(-100%); }    
            }


      /* Navbar Line */
    nav::after {
        background: radial-gradient(50% 100% at 50% 100%, var(--gray) 0%, transparent 100%);
        bottom: 0;
        content: "";
        height: 2px;
        position: absolute;
        width: 100%;
        max-width: var(--max-width);    
        transition: height 250ms ease;
    }

    .navbar-container {
        position: relative;
        display: flex;
        align-items: center;    
        justify-content: space-between;    
        width: var(--max-width);
        height: 100%;
        padding: 0 50px;
        max-width: var(--max-width);
        overflow: hidden;
    }

        .navbar-middle {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            list-style-type: none;
            font-size: clamp(1.2rem, 2vw, 1.5rem);
            height: 100%;
            width: fit-content;
            overflow: visible;
            padding-left: 48px;
        }

                /* Navbar link selector - Credit to: Kevin Powell (Credits Page) */
                .navbar-middle::after {
                    position: absolute;
                    content: "";
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 1px;
                    scale: var(--_width, 0) 1;
                    translate: var(--_left, 0px) 0;
                    transform-origin: left;
                    background: var(--accent);
                    transition: scale 450ms, translate 450ms; /* Control the speed of the underline */
                    transition-delay: 100ms;
                }

        .navbar-container::after {
            position: absolute;
            content: "";
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            transform: scaleX(var(--_width, 0)) translateX(var(--_left, 0px));
            transform-origin: left;
            background: var(--accent);
        }

            /* Navbar Loading Animations */

            .navbar-container.loading-forward::after { animation: load-forward 2.5s linear infinite; }
            .navbar-container.loading-backward::after { animation: load-backward 2.5s linear infinite; }

            @keyframes load-forward {
                0% { transform: scaleX(0.15) translateX(-100%); }
                100% { transform: scaleX(0.15) translateX(1100%); }
            }

            @keyframes load-backward {
                0% { transform: scaleX(0.15) translateX(1100%); }
                100% { transform: scaleX(0.15) translateX(-100%); }    
            }


      /* Navbar Line */
    nav::after {
        background: radial-gradient(50% 100% at 50% 100%, var(--gray) 0%, transparent 100%);
        bottom: 0;
        content: "";
        height: 2px;
        position: absolute;
        width: 100%;
        max-width: var(--max-width);    
        transition: height 250ms ease;
    }

Changing the transparent to var(--background) is really close. Is there anyway to do that but not having the background color visible or to mimic this effect? CodeSandBox: https://codesandbox.io/p/github/KingPr0o7/portfolio/main?import=true (src/components/Nav.astro) (dev:4321) (Clicking on links are slowed to simulate loading)

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Fade-away Loading Effect