How to use CSS or javascript to make dots appear running effect?-CodePudding

At present, I have a bar chart showing rankings. This bar chart has 30 small blocks. According to the value sent from the backend, the corresponding block will show an orange block, which is used to indicate the user's current ranking. Position ~ For example, if the transmission from the backend is 16, then the span of the 16th block will turn orange. But there is a demand at present. I hope that the 16th block will not turn orange at the beginning, but let the orange color run from the first to the 16th. It has a dynamic effect~ But I really don’t know such a demand How to achieve it, I hope to get your help, thank you.

const blocks = document.querySelectorAll(".bar > span");
console.log(blocks)

const mockValueFromServer = 30;
blocks[mockValueFromServer - 1].classList.add("red");

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.anking {
  display: flex;
}

.anking .bar {
  width: 200px;
  height: 10px;
  background-color: #ccc;
  margin: 0px 3px;
  border-radius: 10px;
  overflow:hidden;
}

.anking .bar span {
  display:inline-block;
  background-color: transparent;
  width: 16px;
  height: 190%;
/*   border-radius:2px; */
}

.anking .bar span.red {
  background: #EB781E;
}

<div >
  <div >
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div >
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div >
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

CodePudding user response：

Change your JavaScript part to loop from 0 till the server value (-1) with each pass having a larger timeout delay when adding red class from current index and removing the red class from previous index.

            const blocks = document.querySelectorAll(".bar > span");
            console.log(blocks)

            const mockValueFromServer = 30;
            for (let i = 0; i < mockValueFromServer; i  ) {
                var delaymilisec = i * 10;
                setTimeout(function(){
                    var lightindex = i;
                    blocks[i].classList.add("red");
                    if (i > 0) { //remove previous light
                        blocks[i - 1].classList.remove("red");
                    }
                }, delaymilisec);
            }

You may want to wrap the whole coding with

document.addEventListener("DOMContentLoaded", function(event) {
//code here
});

to wait for the page is ready to run the code.

CodePudding user response：

You could add a keyframes animation to each of the relevant spans which will allow you to add whatever animation you want.

This snippet just sets the span to red for the duration of its animation.

The JavaScript goes through the spans, setting a CSS variable --i to the index of that span. This is used by the CSS to calculate the delay before the animation is started.

const blocks = document.querySelectorAll(".bar > span");

const mockValueFromServer = 30;
for (let i = 0; i < mockValueFromServer; i  ) {
  blocks[i].style.setProperty('--i', i);
  blocks[i].classList.add('animate');
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.anking {
  display: flex;
}

.anking .bar {
  width: 200px;
  height: 10px;
  background-color: #ccc;
  margin: 0px 3px;
  border-radius: 10px;
  overflow: hidden;
}

.anking .bar span {
  display: inline-block;
  background-color: transparent;
  width: 16px;
  height: 190%;
  /*   border-radius:2px; */
}

.anking .bar span.red {
  background: #EB781E;
}

.animate {
  --d: 0.25s;
  /* how long you want each span to animate */
  animation-name: animation;
  animation-delay: calc( var(--i) * var(--d));
  animation-duration: var(--d);
}

@keyframes animation {
  0%,
  100% {
    background-color: red;
  }
}

<div >
  <div >
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div >
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div >
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>