Circular Progress Indicator - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Circular Progress Indicator</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f2f5; font-family: 'Arial', sans-serif; } .progress-container { position: relative; width: 200px; height: 200px; } .circle-bg { fill: none; stroke: #e0e0e0; stroke-width: 20; } .circle { fill: none; stroke: #2575fc; stroke-width: 20; stroke-linecap: round; animation: progressAnimation 2s ease-out forwards; } @keyframes progressAnimation { from { stroke-dasharray: 0 100; } to { stroke-dasharray: 75 100; } } .progress-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: bold; color: #333; } </style> </head> <body> <div class="progress-container"> <svg width="200" height="200"> <circle class="circle-bg" cx="100" cy="100" r="90"></circle> <circle class="circle" cx="100" cy="100" r="90" stroke-dasharray="75 100"></circle> </svg> <div class="progress-text" id="progressText">75%</div> </div> </body> </html>