How to get the circle outside the text with both are center align

how

You’ll need to say a bit more about what you want. What are you trying to do here? Recreate the image in CSS?

1 Like

There may be a number of ways to do it. It could depend on how the circles are created.
The circles could be a background image on the element containing the text.
Or the circles could be positioned absolutely within a common container with the text.

Are the circles supposed to be animated like those shown in your image?

In this example I used flex-box to centre the text. The circle is positioned absolutely so it’s not in the flow and the text goes over the top of it.

1 Like

many ways to do that job but the common and simplest way is to give it border radius with 100 percent border of every side

But if you look at @skchinna7’s diagram, each of the circles has a different percentage of the circumference coloured. How would you achieve that with border-radius?

This is an old example but shows one way.

It could be refined with a little work.

4 Likes

Hi there skchinna7,

this can be done with the “canvas element”. :pensive:
The drawback though, is that it uses “JavaScript”. :scream:

This would mean that alternative content would need
to be provided for those without it. :mask:

If you are interested, here is the code for four of the five circles…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>canvas rings</title>

<style media="screen">
body {
    background: #fcfcfc;
 }
#circles {
    width: 35em;
    padding: 1em;
    margin: 1em auto;
    border: 0.06em solid #999;
    border-radius: 1em;
    box-shadow: 0.5em 0.5em 0.5em #999;
    background: #fff;
    text-align: center;
 }
</style>

</head>
<body> 
<div id="circles">
 <canvas id="canvas"  width="106" height="106"></canvas>
 <canvas id="canvas1" width="106" height="106"></canvas>
 <canvas id="canvas2" width="106" height="106"></canvas>
 <canvas id="canvas3" width="106" height="106"></canvas>
</div>
<script>
(function() {
   'use strict';
   /* jshint browser: true */
function draw() {

  var canvas=document.getElementById('canvas');
  var canvas1=document.getElementById('canvas1');
  var canvas2=document.getElementById('canvas2');
  var canvas3=document.getElementById('canvas3');

/*************  general  **************/
    var x=53; /* circle center x */
    var y=53; /* circle center y */
    var r=50; /* circle radius */
/**************************************/

if(canvas.getContext){

/**************** 80%  ****************/
    var ctx=canvas.getContext('2d');
    var ctx1=canvas.getContext('2d');
/**************************************/

/**************** 57%  ****************/
    var ctx2=canvas1.getContext('2d');
    var ctx3=canvas1.getContext('2d');
/**************************************/

/**************** 90%  ****************/
    var ctx4=canvas2.getContext('2d');
    var ctx5=canvas2.getContext('2d');
/**************************************/

/**************** 40%  ****************/
    var ctx6=canvas3.getContext('2d');
    var ctx7=canvas3.getContext('2d');
/**************************************/


/**************** 80%  ****************/
    var sa=1.5*Math.PI;  /* start angle */
    var ea=1.5*Math.PI+1.6*Math.PI;  /* end angle */

    var sa1=1.1*Math.PI;   /* start angle */
    var ea1=1.5*Math.PI;  /* end angle */
/**************************************/

/**************** 57%  ****************/
    var sa2=1.5*Math.PI;  /* start angle */
    var ea2=1.5*Math.PI+1.14*Math.PI;  /* end angle */

    var sa3=0.64*Math.PI;   /* start angle */
    var ea3=1.5*Math.PI;  /* end angle */
/**************************************/


/**************** 90%  ****************/
    var sa4=1.5*Math.PI;  /* start angle */
    var ea4=1.5*Math.PI+1.8*Math.PI;  /* end angle */

    var sa5=1.3*Math.PI;   /* start angle */
    var ea5=1.5*Math.PI;  /* end angle */
/**************************************/

/**************** 40%  ****************/
    var sa6=1.5*Math.PI;  /* start angle */
    var ea6=1.5*Math.PI+0.8*Math.PI;  /* end angle */

    var sa7=0.3*Math.PI;   /* start angle */
    var ea7=1.5*Math.PI;  /* end angle */
/**************************************/

/********** 80%  **********/
   ctx.beginPath();
   ctx.arc(x,y,r,sa,ea); 
   ctx.strokeStyle='#0099ac';
   ctx.lineWidth=3;
   ctx.stroke();
   ctx.font='1.5em sans-serif';
   ctx.fillStyle='#666';
   ctx.fillText('80%',30,64);

   ctx1.beginPath();
   ctx1.arc(x, y, r, sa1, ea1);
   ctx1.strokeStyle='#ccc';
   ctx1.lineWidth=3;
   ctx1.stroke();
/**************************/

/********** 57%  **********/
   ctx2.beginPath();
   ctx2.arc(x,y,r,sa2,ea2); 
   ctx2.strokeStyle='#0099ac';
   ctx2.lineWidth=3;
   ctx2.stroke();
   ctx2.font='1.5em sans-serif';
   ctx2.fillStyle='#666';
   ctx2.fillText('57%',30,64);

   ctx3.beginPath();
   ctx3.arc(x,y,r,sa3,ea3);
   ctx3.strokeStyle='#ccc';
   ctx3.lineWidth=3;
   ctx3.stroke();
/**************************/

/********** 90%  **********/
   ctx4.beginPath();
   ctx4.arc(x,y,r,sa4,ea4); 
   ctx4.strokeStyle='#0099ac';
   ctx4.lineWidth=3;
   ctx4.stroke();
   ctx4.font='1.5em sans-serif';
   ctx4.fillStyle='#666';
   ctx4.fillText('90%',30,64);

   ctx5.beginPath();
   ctx5.arc(x,y,r,sa5,ea5);
   ctx5.strokeStyle='#ccc';
   ctx5.lineWidth=3;
   ctx5.stroke();
/**************************/

/********** 40%  **********/
   ctx6.beginPath();
   ctx6.arc(x,y,r,sa6,ea6); 
   ctx6.strokeStyle='#0099ac';
   ctx6.lineWidth=3;
   ctx6.stroke();
   ctx6.font='1.5em sans-serif';
   ctx6.fillStyle='#666';
   ctx6.fillText('40%',30,64);

   ctx7.beginPath();
   ctx7.arc(x,y,r,sa7,ea7);
   ctx7.strokeStyle='#ccc';
   ctx7.lineWidth=3;
   ctx7.stroke();
/**************************/
  }
}
   draw();
}());
</script>
</body>
</html>
</html>

I will let you code the fifth. :sunglasses:

coothead

2 Likes

Hi there skchinna7,

As I am not a natural “JavaScript” coder, and having
a little spare time, I thought that I should really tidy up
my disgustingly rough and ready coding example.

To save having to make manual calculations, the
circle’s arc dimensions have been placed in an array.

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>canvas rings</title>

<style media="screen">
body {
    background: #fcfcfc;
 }
#circles {
    width: 35em;
    padding: 1em;
    margin: 1em auto;
    border: 0.06em solid #999;
    border-radius: 1em;
    box-shadow: 0.5em 0.5em 0.5em #999;
    background: #fff;
    text-align: center;
 }
</style>

</head>
<body> 
<div id="circles">
 <canvas width="106" height="106"></canvas>
 <canvas width="106" height="106"></canvas>
 <canvas width="106" height="106"></canvas>
 <canvas width="106" height="106"></canvas>
 <canvas width="106" height="106"></canvas>
</div>
<script>
(function() {
   'use strict';

/**** this is arc array and is editable ****/
    var arc=[0.4,0.8,0.57,0.83,0.9];
/******************************************/
/*************  general  **************/
    var x=53; /* circle center x */
    var y=53; /* circle center y */
    var r=50; /* circle radius */
/**************************************/

function draw() {

    var canvas=document.getElementsByTagName('canvas');

if(canvas[0].getContext){

for(var c=0;c<canvas.length;c++) {

   var ctx=canvas[c].getContext('2d');
   var ctx1=canvas[c].getContext('2d');

   var sa=1.5*Math.PI;  /* start angle */
   var ea=1.5*Math.PI+arc[c]*2*Math.PI;  /* end angle */

   var text=Math.ceil(arc[c]*100)+'%';

   ctx.beginPath();
   ctx.arc(x,y,r,sa,ea); 
   ctx.strokeStyle='#0099ac';
   ctx.lineWidth=3;
   ctx.stroke();
   ctx.font='1.5em sans-serif';
   ctx.fillStyle='#666';
   ctx.fillText(text,30,64);

   ctx1.beginPath();
if(arc[c]===0) {
   ctx1.arc(x,y,r,0,2*Math.PI);
 }
else {
   ctx1.arc(x,y,r,ea,sa);
 }
   ctx1.strokeStyle='#ccc';
   ctx1.lineWidth=3;
   ctx1.stroke();
   }
  }
 }
   draw();
}());
</script>
</body>
</html>

coothead

2 Likes

Although the OP has not returned to comment I have developed another css solution that is a little simpler and may be of interest.

It was fun anyway :slight_smile:

5 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.