Create a percentage Circle with CSS

Create a percentage Circle with CSS

Creating a percentage circle using CSS is a great way to visually represent progress or completion in a circular format. You can achieve this effect using a combination of CSS properties such as border-radius, conic-gradient, and transform. Here's a step-by-step guide to creating a percentage circle:

Example

Below is an example of how to create a percentage circle with CSS:

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Percentage Circle</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="circle"> <div class="circle-inner"> <span class="percentage">75%</span> </div> </div> </body> </html>

CSS

/* Container for the circle */ .circle { width: 150px; height: 150px; border-radius: 50%; background: conic-gradient(#4db8ff 0% 75%, #e0e0e0 75% 100%); display: flex; align-items: center; justify-content: center; position: relative; } /* Inner circle to display the percentage */ .circle-inner { width: 120px; height: 120px; border-radius: 50%; background-color: #fff; display: flex; align-items: center; justify-content: center; position: absolute; } /* Percentage text style */ .percentage { font-size: 24px; font-weight: bold; color: #333; }

Explanation

  1. .circle:

    • Creates the outer circle.
    • conic-gradient is used to create the percentage effect. The color #4db8ff represents the completed part, and #e0e0e0 represents the remaining part. The percentage is represented by adjusting the stop percentages (0% 75% for 75% completion).

  2. .circle-inner:

    • Creates a white circle in the center to display the percentage text.
    • Positioned absolutely to ensure it's centered within the outer circle.

  3. .percentage:

    • Styles the percentage text inside the circle.

Customizing the Percentage

To display a different percentage, adjust the conic-gradient stops in the .circle CSS class. For example, for 50%, change:

background: conic-gradient(#4db8ff 0% 50%, #e0e0e0 50% 100%);

Alternative with SVG

If you prefer to use SVG for more complex designs, here's an example using SVG:

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SVG Percentage Circle</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="svg-circle"> <svg width="150" height="150" viewBox="0 0 150 150"> <circle cx="75" cy="75" r="70" stroke="#e0e0e0" stroke-width="15" fill="none"/> <circle cx="75" cy="75" r="70" stroke="#4db8ff" stroke-width="15" fill="none" stroke-dasharray="440" stroke-dashoffset="110"/> <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="24" fill="#333">75%</text> </svg> </div> </body> </html>

CSS

.svg-circle { display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; } circle { transition: stroke-dashoffset 0.3s; }

Explanation:

  • The stroke-dasharray and stroke-dashoffset properties are used to control the progress.
  • stroke-dasharray is set to the circumference of the circle, and stroke-dashoffset controls how much of the circle is filled.

Examples

  1. "How to create a percentage circle with CSS and HTML"

    • Description: Demonstrates how to create a basic percentage circle using CSS and HTML with the conic-gradient function.
    • Code:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .circle { width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(#4caf50 0% 70%, #e0e0e0 70% 100%); position: relative; display: flex; align-items: center; justify-content: center; color: #333; font-size: 1.2em; } </style> </head> <body> <div class="circle">70%</div> </body> </html>

  2. "Creating a percentage circle with a border in CSS"

    • Description: Shows how to create a percentage circle with a border to visualize progress.
    • Code:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container { position: relative; width: 100px; height: 100px; } .circle { width: 100px; height: 100px; border-radius: 50%; border: 10px solid #e0e0e0; position: relative; } .circle::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(#4caf50 0% 70%, transparent 70% 100%); } .percentage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.2em; color: #333; } </style> </head> <body> <div class="container"> <div class="circle"></div> <div class="percentage">70%</div> </div> </body> </html>

  3. "How to animate a percentage circle with CSS"

    • Description: Demonstrates how to animate the percentage circle to fill up gradually using CSS keyframes.
    • Code:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .circle { width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(#4caf50 0%, #e0e0e0 0%); position: relative; display: flex; align-items: center; justify-content: center; color: #333; font-size: 1.2em; animation: fill 2s ease-out forwards; } @keyframes fill { 0% { background: conic-gradient(#4caf50 0%, #e0e0e0 0%); } 100% { background: conic-gradient(#4caf50 0% 70%, #e0e0e0 70% 100%); } } </style> </head> <body> <div class="circle">70%</div> </body> </html>

  4. "Creating a circular progress bar with CSS"

    • Description: Shows how to create a circular progress bar with a dynamic percentage using conic-gradient.
    • Code:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .progress-bar { width: 100px; height: 100px; border-radius: 50%; position: relative; background: conic-gradient(#4caf50 0% 70%, #e0e0e0 70% 100%); } .progress-bar::before { content: ''; position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; background: #fff; border-radius: 50%; transform: translate(-50%, -50%); } .percentage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.2em; color: #333; } </style> </head> <body> <div class="progress-bar"> <div class="percentage">70%</div> </div> </body> </html>

  5. "CSS percentage circle with text center alignment"

    • Description: Shows how to center-align text within a percentage circle using CSS Flexbox.
    • Code:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .circle-container { display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; } .circle { width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(#4caf50 0% 70%, #e0e0e0 70% 100%); display: flex; align-items: center; justify-content: center; color: #333; font-size: 1.2em; } </style> </head> <body> <div class="circle-container"> <div class="circle">70%</div> </div> </body> </html>

  6. "How to create a gradient percentage circle in CSS"

    • Description: Demonstrates creating a percentage circle with a gradient effect using CSS.
    • Code:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .circle { width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(#ff0000 0% 40%, #ffff00 40% 70%, #00ff00 70% 100%); display: flex; align-items: center; justify-content: center; color: #333; font-size: 1.2em; } </style> </head> <body> <div class="circle">70%</div> </body> </html>

More Tags

sendkeys new-window routerlink delivery-pipeline infinite-loop c#-to-vb.net servlet-filters istanbul jquery-ui array.prototype.map

More Programming Questions

More Fitness Calculators

More Physical chemistry Calculators

More Weather Calculators

More Math Calculators