How to use CSS and process color mode to achieve loader animations (with code)

This article brings you the content is about how to use CSS and color-blending mode to achieve loader animation effect (with code), there is a certain reference value, the need for a friend can refer to, I hope you have some help.

Effect Preview

Source code Download

Https://github.com/comehope/front-end-daily-challenges

Code interpretation

To define the DOM, there are only 1 elements:

<div class= "Loader" ></div>

Center display:

body {    margin:0;    HEIGHT:100VH;    Display:flex;    Align-items:center;    Justify-content:center;    Background-color:lightyellow;}

Define Container Dimensions:

. loader {    width:30em;    Height:3em;    font-size:10px;}

Use pseudo-elements to draw 2 rounded rectangles, each occupying half the width of the container, placed at the left and right sides of the container, shaded separately:

. loader {    position:relative;}. Loader::before,.loader::after {    content: ';    Position:absolute;    width:50%;    Height:inherit;    Border-radius:1em;}. Loader::before {    left:0;    Background-color:dodgerblue;}. loader::after {    right:0;    Background-color:hotpink;}

Add ' loading ' text to rounded rectangles:

. loader::before,.loader::after {    content: ' Loading ';    font-size:2.5em;    Color:white;    Text-align:center;    Line-height:1em;}

Add animation effects:

. loader::before,.loader::after {    animation:5s move ease-in-out Infinite;} @keyframes Move {    50% {        Transform:translatex (100%);    }}

Set the motion direction variables for the two rounded rectangles to move them relative to each other:

. loader::before {    --direction:1;}. Loader::after {    --direction:-1;} @keyframes Move {    50% {        Transform:translatex (Calc (100% * VAR (--direction));}    }

Finally, set the process color mode so that the part that intersects the two rectangles does not overwrite but causes the color to overlap:

. loader::before,.loader::after {    mix-blend-mode:multiply;}

Done!