Found an interesting CSS style, using CSS to achieve the wave progress chart

The principle of

Set the border of the two rectangles to border-radius, and the parent container to Overflow: Hidden, and then animate them with the rotation effect. The structure is shown below, with different colors for clarity.

The HTML structure is as follows:

<div class="box">
    <div class="rect">
        <text>50%</text>
    </div>
</div>
Copy the code

The CSS code is as follows:

.box {
    width: 100vw;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.rect {
    width: 300px;
    height: 300px;
    border: 4px solid skyblue;
    overflow: hidden;
    background: skyblue;
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    font-weight: bold;
    color: #aaa;
}
.rect text {
    z-index: 2;
    user-select: none;
}
.rect::before..rect::after {
    content: ' ';
    width: 600px;
    height: 600px;
    position: absolute;
    bottom: 150px;
    left: 50%;
    margin-left: -300px;
}
.rect::before {
    border-radius: 45%;
    background: rgba(255.255.255.4);
    animation: rotate 6s linear infinite;
}
.rect::after {
    border-radius: 47%;
    background: rgba(255.255.255.9);
    animation: rotate 10s linear infinite;
}
@keyframes rotate {
    0% {
        transform: rotate(0);
        bottom: 150px;
    }
    50% {
        transform: rotate(180deg);
        bottom: 160px;
    }
    100% {
        transform: rotate(360deg);
        bottom: 150px; }}Copy the code

The wave effect is achieved by setting the rotation animation parameters of the two rectangles. The animation time and rotation position of the two rectangles are different, so it looks more natural. The final effect is as follows:

thinking

In actual projects, it can be set according to different scenarios. For example, to display the progress effect dynamically, you can change the style of rectangles by real-time calculation to achieve the change of progress. In this case, the size of progress is changed by their bottom.

Reference: github.com/chokcoco/iC…