-
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> -
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> -
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()
Это всего лишь несколько примеров. Существует множество других способов создания круговых индикаторов выполнения на разных языках программирования.