CSS background animation that indicates an loading HTML element

204 Views Asked by Hanus á Tjaldrafløtti At 15 November 2022 at 01:59

I am building a web application, some HTML elements might take some time to be fetched. So I decided to render the layout of the element, without the data from the backend. But I want to indicate to the user, that the data is loading with a CSS animation. I want it to look like this, but I want the transition of the color change to be smooth so that the lighter area travels from one side to the other. Any ideas?

body {
    animation: 2000ms infinite color-loading;
}

@keyframes color-loading {
    0% {
        background: linear-gradient(
            to right,
            #363644,
            #282933
        );
    }
    100% {
        background: linear-gradient(
            to right,
            #282933,
            #363644
        );
    }
}

Original Q&A

There are 2 best solutions below

Kairav Thakar On 15 November 2022 at 02:17

I think animation-timing-function property will help you out.

Also, I have checked and find your background colors are very similar, try with other color combination with animation-timing-function property and see the difference.

Please refer for more detail information below link: https://www.w3schools.com/css/css3_animations.asp

Please let me know if you find any issues.

AtomicUs5000 On 15 November 2022 at 02:49

I don't think smooth transition of linear gradients in css transitions/animations is supported in any major browsers yet.

One way you can achieve something similar with css only is by using one div inside the other and make it so that the container div hides its overflow, make the inner div longer, relatively positioned, and with a linear-gradient background. Then in your animation, you can smoothly reposition the inner div:

.div1 {
    display: block;
    width: 200px;
    height: 20px;
    background-color: #282933;
    overflow: hidden;
}
.div2 {
    display: block;
    width: 700px;
    height: 20px;
    background: 
          linear-gradient(
              to right, 
              rgba(255, 255, 255, 0) 0%, 
              rgba(255, 255, 255, 0) 40%, 
              rgba(255, 255, 255, 0.5) 50%, 
              rgba(255, 255, 255, 0) 60%, 
              rgba(255, 255, 255, 0) 100%
      );
    position:relative;
    left: -700px;
    animation: color-loading 2000ms ease 0s normal infinite none;
}
@keyframes color-loading {
    0% {
        left: -700px;
    }
    100% {
        left: 0px;
    }
}

...
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>
...

CSS background animation that indicates an loading HTML element

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in CSS-ANIMATIONS

Related Questions in LINEAR-GRADIENTS

Related Questions in KEYFRAME

Trending Questions

Popular # Hahtags

Popular Questions