Pronto, está todo aí. Só mandar o navegador abrir que já roda. Como pode ver, o código da imagem fica todo dentro do html o que é absurdamente inconveniente ao criar repetidas imagens na tela.
Eu pesquisei um pouco sobre.
Você tem que separar os arquivos para cada responsável.
Tipo html ter só html, js só js e css só css.
Pelo o que eu pesquisei dá pra ficar instanciando os círculos através do JS. Já eu mando um exemplo.
// Array com configurações para os círculos
const circulosConfig = [
{ valorInicial: 450, valorFinal: 300 },
{ valorInicial: 400, valorFinal: 250 },
{ valorInicial: 350, valorFinal: 200 },
{ valorInicial: 300, valorFinal: 150 },
];
// Função para criar elementos de círculos dinamicamente
function criarCirculoSVG(config) {
// Cria uma tag <img> para o arquivo SVG
const img = document.createElement("img");
img.src = "img/mini-circBarr.svg"; // Caminho do arquivo SVG
img.alt = "Circular Progress Bar";
img.classList.add("mini-circBarr");
// Adiciona um atributo personalizado para controlar o valor
img.dataset.valorInicial = config.valorInicial;
img.dataset.valorFinal = config.valorFinal;
return img;
}
// Função para animar o valor dos círculos
function animarCirculo(img) {
let rotor = parseInt(img.dataset.valorInicial);
const valorFinal = parseInt(img.dataset.valorFinal);
function aumentar() {
img.style.setProperty("--value", rotor);
if (rotor > valorFinal) {
rotor--;
setTimeout(aumentar, 10);
} else {
diminuir();
}
}
function diminuir() {
img.style.setProperty("--value", rotor);
if (rotor < parseInt(img.dataset.valorInicial)) {
rotor++;
setTimeout(diminuir, 10);
} else {
aumentar();
}
}
aumentar();
}
// Função para inicializar o sistema
function inicializarCirculos() {
const container = document.getElementById("progressContainer");
// Cria os círculos e os adiciona ao contêiner
circulosConfig.forEach((config) => {
const circulo = criarCirculoSVG(config);
container.appendChild(circulo);
// Inicia a animação de cada círculo
animarCirculo(circulo);
});
}
// Inicia o sistema ao carregar a página
window.onload = inicializarCirculos;