Css - How auto execute function and change stroke color to svg by percent?

LuigiStillavato
October 22, 2024
190 views
0 votes
2 Answers

I’m aproach tto js but I’ve many difficult to do the below action.

I’m using the circlifull jquery for a data counter in my web page, the data is calle ny api from the server and sent to the page by modifying the css. I have difficult to change the attribute stroke to class "circle" setting colors by percent printed in the text section.

Source code circlifull

<section id="connect-data" stroke="rgb(255, 0, 0)" class="svg-container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" class="circliful">undefined<circle cx="100" cy="100" r="57" class="border" fill="none" stroke="#ccc" stroke-width="10" stroke-dasharray="360" transform="rotate(-90,100,100)"></circle>
<circle class="circle" cx="100" cy="100" r="57" fill="none" stroke="#008000" stroke-width="10" stroke-dasharray="36, 20000" transform="rotate(-90,100,100)"></circle>undefined<text class="timer" text-anchor="middle" x="100" y="110" style="font-size: 22px; undefined;" fill="#aaa">10%</text></svg>
</section>

I tried this test code inside to the html page for to change the color to circlifull progress bar but doesn’t work.

<script>
// Color red     --> rgb(255, 0, 0);
// Color orange  --> rgb(255, 182, 25);
// Color green   --> rgb(0, 128, 0);
$(document).ready(function() {
  if
  document.getElementById("connect-data").setAttribute ("stroke", "rgb(255, 0, 0)");
 });
</script>

How can I change the color and also setting condition for to assign:

Red under 10%
Orange 10% to 30%
Green 30%+

???

Thanks if someone can help me.

Section container

<section id="connect-data" stroke="rgb(255, 0, 0)" class="svg-container"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" class="circliful">undefined<circle cx="100" cy="100" r="57" class="border" fill="none" stroke="#ccc" stroke-width="10" stroke-dasharray="360" transform="rotate(-90,100,100)"></circle> <circle class="circle" cx="100" cy="100" r="57" fill="none" stroke="#008000" stroke-width="10" stroke-dasharray="36, 20000" transform="rotate(-90,100,100)"></circle>undefined<text class="timer" text-anchor="middle" x="100" y="110" style="font-size: 22px; undefined;" fill="#aaa">10%</text></svg> </section>

My JS code

<script>
// Color red     --> rgb(255, 0, 0);
// Color orange  --> rgb(255, 182, 25);
// Color green   --> rgb(0, 128, 0);
$(document).ready(function() {
  if
  document.getElementById("connect-data").setAttribute ("stroke", "rgb(255, 0, 0)");
 });
</script>

Answers

I update the progress bar every second and move closer to the maximum data of 20,000 by 1,000 per second. In the middle, I write in % where it is.

At 30% or above it is green, at 10% or above it is orange, otherwise it is red.

// Color red     --> rgb(255, 0, 0);
// Color orange  --> rgb(255, 182, 25);
// Color green   --> rgb(0, 128, 0);
$(document).ready(function() {
    let start = 0;
    const end = 20000;

    function progressBar() {
        setTimeout(() => {
            start += 1000;

            document.querySelector(".timer").innerHTML = (100 / (end / start)) + "%"; // percentage
            document.querySelector(".circle").setAttribute("stroke-dasharray", (360 / (end / start)) + ", 360"); // stroke-dasharray

            if (start >= (end * 0.3)) { // +30%
                document.querySelector(".circle").setAttribute("stroke", "rgb(0, 128, 0)"); // green
            }
            else if (start >= (end * 0.1)) { // +10%
                document.querySelector(".circle").setAttribute("stroke", "rgb(255, 182, 25)"); // orange
            }
            else {
                document.querySelector(".circle").setAttribute("stroke", "rgb(255, 0, 0)"); // red
            }

            if (start < end) {
                progressBar();
            }
        }, 1000);
    }
    progressBar();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<section id="connect-data" class="svg-container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" class="circliful">
        <circle class="border" cx="100" cy="100" r="57" fill="none" stroke="#cccccc" stroke-width="10" stroke-dasharray="360" transform="rotate(-90,100,100)"></circle>
        <circle class="circle" cx="100" cy="100" r="57" fill="none" stroke="#008000" stroke-width="10" stroke-dasharray="0, 360" transform="rotate(-90,100,100)"></circle>
        <text class="timer" text-anchor="middle" x="100" y="110" style="font-size: 22px;" fill="#aaa">0%</text>
    </svg>
</section>

I hope this helps!

You can simplify the progress animation by adding a pathLength attribute value of 100. This way the stroke-dasharray values can easily
be updated relative to a range from 0–100 percent.

// 10%
stroke-dasharray="10 100"

For contextual stroke color values, add some conditions like so

  let stroke = 'green'
  if(value<=30) stroke = 'orange'
  if(value<10) stroke = 'red'

let gauge = document.querySelector('.circle')
let textProgress = document.querySelector('.timer')

// progress animation on page load
setTimeout((e) => {
  updateProgress(gauge, 20)
}, 500)

inputProgress.addEventListener('input', (e) => {
  let value = +e.currentTarget.value
  updateProgress(gauge, value)
})

function updateProgress(el, value) {
  textProgress.textContent = `${value}%`

  let stroke = 'green'
  if (value <= 30) stroke = 'orange'
  if (value < 10) stroke = 'red'

  // add a tiny offset to fix gaps at 100%
  if (value === 100) value = 101
  el.setAttribute('stroke-dasharray', `${value} 100`)
  el.setAttribute('stroke', `${stroke}`)
}

.circle {
  transition: 0.5s
}

svg {
  width: 50%
}

<p>Progress:<input id="inputProgress" type="range" value="0" min="0" max="100" step="1"></p>

<section id="connect-data" stroke="rgb(255, 0, 0)" class="svg-container">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 194 186" class="circliful">
    <circle cx="100" cy="100" r="57" class="border" fill="none" stroke="#ccc" stroke-width="10" stroke-dasharray="360" transform="rotate(-90,100,100)" />
    <circle class="circle" cx="100" cy="100" r="57" fill="none" stroke="#008000" stroke-width="10" pathLength="100" stroke-dasharray="0 100" transform="rotate(-90,100,100)" />
    <text class="timer" text-anchor="middle" x="100" y="110" style="font-size: 22px; undefined;" fill="#aaa">0%</text>
  </svg>
</section>

Please signup or login to give your own answer.

Click here to cancel reply.