Javascript Google PieChart动画加载

Question

I'm doing a Google PieChart and I want the load to have a loading effect like the circle shown on this website. enter link description here But in this web use another library that is not google. I need to find the solution with google.

This is my code :

enter code here 

function cargarDonut(idElemento, color){
   google.charts.load("current", {packages:["corechart"]});
   google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work',     11],
    ['Eat',      2],
    ]);

  var options = {
    chartArea:{top:'0%',width:'100%', height:'80%'},
    height: 240,
    backgroundColor: 'transparent',
    pieHole: 0.67,
    legend: 'none',
    pieSliceBorder: 100,
    pieSliceText: 'none',
    slices: {  2: {offset: 1}},

    colors: [ '#797879', color],

  };

  var chart = new 
google.visualization.PieChart(document.getElementById(idElemento));
chart.draw(data, options);


}

}

Answer 1

Here i have craeted a example for you. https://jsfiddle.net/wecv3x8r/

function cargarDonut(idElemento, color){
   google.charts.load("current", {packages:["corechart"]});
   google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work',     11],
    ['Eat',      2],
    ]);

  var options = {
    chartArea:{top:'0%',width:'100%', height:'80%'},
    height: 240,
    backgroundColor: 'transparent',
    pieHole: 0.67,
    legend: 'none',
    pieSliceBorder: 100,
    pieSliceText: 'none',
    slices: {  2: {offset: 1}},

    colors: [ '#797879', color],

  };

  var chart = new 
google.visualization.PieChart(document.getElementById(idElemento));
chart.draw(data, options);
// initial value
    var percent = 0;
    // start the animation loop
    var handler = setInterval(function(){
        // values increment
        percent += 1;
        // apply new values
        data.setValue(0, 1, percent);
        data.setValue(1, 1, 100 - percent);
        // update the pie
        chart.draw(data, options);
        // check if we have reached the desired value
        if (percent > 74)
            // stop the loop
            clearInterval(handler);
    }, 30);

}

}