那用chart.js为我实现这个功能

好的，下面是一个使用Chart.js创建一个按比例展示的进度条的示例代码：

HTML代码：

<canvas id="myChart"></canvas>

Javascript代码：

// 获取canvas元素
var ctx = document.getElementById('myChart').getContext('2d');

// 创建进度条
var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ['进度'],
        datasets: [{
            label: '进度',
            backgroundColor: 'blue',
            borderColor: 'blue',
            borderWidth: 1,
            data: [50] // 进度条占比，这里是50%
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            xAxes: [{
                display: false,
                ticks: {
                    beginAtZero: true,
                    max: 100
                }
            }],
            yAxes: [{
                display: false
            }]
        },
        animation: {
            duration: 2000, // 动画时间（毫秒）
            easing: 'easeInOutQuart' // 缓动函数
        },
        legend: {
            display: false
        }
    }
});

这个例子中，我们使用Chart.js创建了一个水平的进度条，进度条占比为50%。你可以根据需要调整数据来改变进度条的占比和样式。

最后，你需要确保在HTML页面中引入Chart.js的库文件。