CSS background animation that indicates an loading HTML element-CodePudding

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
        );
    }
}

CodePudding user response：

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 >
        <div ></div>
    </div>
</body>
...

CodePudding user response：

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.