Just like the above image or an idea or reference to achieve this design, I appreciate the help or suggestion given by community thank you

I have got reference of progress bar which is circular but not able find an approach to solve it.

CodePudding user response：

const boxes = document.querySelectorAll(".box");
const colors = ['red', 'blue', 'green', 'yellow', 'orange', 'violet']
boxes.forEach((box) => {
  const insideContent = box.innerText;
  box.style.border = `6px solid ${colors[insideContent]}`
})

#app {
  display: flex;
}
.box {
  width: 50px;
  height: 50px;
  margin: 10px;
  background-color: cyan;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="app">
  <div >1</div>
  <div >2</div>
  <div >3</div>
</div>

As per your question I think this is what you are trying to achieve.

CodePudding user response：

First define a pseudo class root

:root {
  --color-val: blue;
}

Note: In order to use the --color-val you need to write it as color: var(--color-var) in CSS

Second use JavaScript to update the variable --color-val

let colors = 
    
var root = document.querySelector(':root');

const delay = ms => new Promise(res => setTimeout(res, ms));

const colorChange = async () => {
  await delay(1000);
  color = colors[Math.floor(Math.random() * colors.length)]
  console.log(color)
  root.style.setProperty('--color-val', color);
};

colorChange()

Note:

• Add the color list you want to select from or go to CodePen for a list of 1000 hex codes.
• Promise are used for asynchronous function and can be skipped by using setTimeOut for a delayed loop or if used with another eventlistener.

CodePudding user response：

I apologize if I misunderstood the question. Wrote in a hurry and without beautyful visualisation, if you disassemble the principle, you can customize it.

h1 {
  display: block;
  margin:0 auto;  
  text-align: center;
  padding-top:20%;
}

.container {
  display:flex;
  width: 150px;
  height: 150px;
  border: 1px solid black;
  z-index: 110;
  margin:0;
  margin: -10px;
  
}

.top {
  display:block;
  background-color: green;
  height: 24px;
  width: 150px; /* gorizontal top */
  
    animation: top 1s linear;
  animation-fill-mode: forwards;
}


@keyframes top {
    0% {
        width: 0px;
    }
    100% {
        width: 150px;
    }
}

.right {

  background-color: green;
  height: 0%;/* right */
  width: 32px;
  
  animation: right 1s linear;
  animation-fill-mode: forwards;
  animation-delay: 1s;  
  
  z-index: 10;
  
}

@keyframes right {
    0% {
        height: 0%;
    }
    100% {
        height: 100%;
    }
}




.box {
  position: fixed;
  top: 32.5px;
  left: 32.5px;
  
  
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: auto;
  z-index: 120;
  margin: -10px -10px;

}

.bottom {
  position: absolute;
  top: 123px;
  left: 150px;
  background-color: green;
  width: 0px;
  height: 27px;
  
  z-index: 10;
  
    animation: bottom 1s linear;
  animation-fill-mode: forwards;
  animation-delay: 2s;
  /* animation-direction: reverse; */
  
}

@keyframes bottom {
    0% {
        transform: translate(0,0);
    }
    100% {
        transform: translate(-250px,0);
    -webkit-transform: translate(-250px,0); /** Safari & Chrome **/
    -o-transform: translate(-250px,0); /** Opera **/
    -moz-transform: translate(-250px,0); /** Firefox **/
    width: 250px;
    }
}


.left {
  position: absolute;
  top: 122px;
  
  
  background-color: green;
  width: 25px;
  height: 0px;
  
  animation: left 1s linear;
  animation-fill-mode: forwards;
  animation-delay: 3s;
  
  
}

@keyframes left {
    0% {
        transform: translate(0,0);
    }
    100% {
        transform: translate(0,-250px);
    -webkit-transform: translate(0,-250px); /** Safari & Chrome **/
    -o-transform: translate(0,-250px); /** Opera **/
    -moz-transform: translate(0,-250px); /** Firefox **/
    height: 277px;
    }
}

<div class='head'>


<div class='container'>
  <div class='top'></div>
  <div class='box'>
    <h1 id='timer'>
    1
    </h1>
  </div>
  
  <div class='right'></div>
  <div class='bottom'></div>
  <div class='left'></div>
</div>

</div>

 <script type="text/javascript">
 init()
            function init()
            {
                sec = 0;
                setInterval(tick, 1000);
            }
            
            function tick()
            {       if (sec<3) { sec  
                document.getElementById("timer").
                    childNodes[0].nodeValue = sec;
                    } else {
                    clearInterval(0);
                    }
            }
</script>

Also, instead of the SetInterval script, you can take values from your block width and height styles and output a mathematical calculation in h1 instead of a stopwatch.