Методы создания кругового индикатора выполнения с примерами кода

  1. HTML/CSS:

    <div class="progress-bar-container">
    <div class="progress-bar"></div>
    </div>
    <style>
    .progress-bar-container {
    width: 200px;
    height: 200px;
    position: relative;
    border-radius: 50%;
    background-color: #e0e0e0;
    }
    .progress-bar {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #4caf50;
    clip: rect(0, 100px, 200px, 0);
    }
    </style>
  2. JavaScript (с использованием Canvas):

    <canvas id="progress-bar" width="200" height="200"></canvas>
    <script>
    const canvas = document.getElementById('progress-bar');
    const context = canvas.getContext('2d');
    const x = canvas.width / 2;
    const y = canvas.height / 2;
    const radius = 80;
    const startAngle = -0.5 * Math.PI;
    const endAngle = 1.5 * Math.PI;
    const counterClockwise = false;
    const progress = 0.7;
    context.beginPath();
    context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
    context.lineWidth = 10;
    context.strokeStyle = '#4caf50';
    context.stroke();
    context.beginPath();
    context.arc(x, y, radius, startAngle, (progress * 2 - 0.5) * Math.PI, counterClockwise);
    context.lineWidth = 10;
    context.strokeStyle = '#4caf50';
    context.stroke();
    </script>
  3. Python (с использованием Matplotlib):

    import matplotlib.pyplot as plt
    progress = 0.7
    circle = plt.Circle((0.5, 0.5), 0.4, color='gray')
    sector = plt.Wedge((0.5, 0.5), 0.4, 90, 360 * progress + 90, color='#4caf50')
    fig, ax = plt.subplots()
    ax.add_artist(circle)
    ax.add_artist(sector)
    ax.axis('off')
    plt.show()

Это всего лишь несколько примеров. Существует множество других способов создания круговых индикаторов выполнения на разных языках программирования.