HTML CSS: Diplaying number divided by total number-CodePudding

I am trying to display numbers in circle which is number over total numbers for example 90/100.

Like this:

Percentage Circle

I tried like this but need small help because Circle is breaking up.

.kanban-circle{
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 8px;

    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;

    font: 32px Arial, sans-serif;


 }

 <span >
      <u>90</u>
      <br></br>
        100
                                          
</span>

CodePudding user response：

Here it is, if you like more space between the number and the horizontal line, change the css for .line like { margin: 5px 0; }

.kanban-circle {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  padding: 8px;
  background: #fff;
  border: 2px solid #666;
  color: #666;
  text-align: center;
  font: 32px Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

.line {
  padding: 0;
  margin: 0;
  width: 100%
}

span {
  font-size: 15px;
}

<div >
  <span>90</span>
  <hr  />
  <span>100
</span></div>

CodePudding user response：

The problem is with the <br> tag. I don't really know why, but through this tag, the lower number is not seen as part of the circle and the border is not drawn around it.

I experimented a little bit and came to following solution with following code:

    .kanban-circle{
        border-radius: 50%;
        background-color: coral;
        width: 70px;
        height: 70px;
        padding: 8px;
    
        background: #fff;
        border: 2px solid #666;
        color: #666;
        text-align: center;
    
        font: 32px Arial, sans-serif;
    
    
     }
     
        <div >
            <div>
              <u>90</u>
              110
            </div>
        </div>

I replaced span with div, but the result should be the same.

CodePudding user response：

here the solution with also the comments, if you want to read it.

I make it responsive to the width, just change the width of parent element, and automatically change all the things inside!

the first 2 lines of CSS are css variables

 --width: 3rem;
 --color: #666;

Change their value, and all the elements will be changed automatically, and be show always good.

if you want to also be more responsive, you can use some new CSS units in --width: like vw, vh, %, etc... this is relative to something (parent elements, or viewport width, etc...)
so for responsive layout try to not use (avoid) absolute units like cm, px, in, pt.
details: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

in html I used <hr> instead of <br>

#container {
  --width: 3rem;
  --color: #666;
  /* same height, same width */
  width: var(--width);
  height: var(--width);
  /* responsive padding that is relative to the container width*/
  padding: calc(var(--width) / 5);
  /* always perfect circle */
  border-radius: var(--width);
  /* centering */
  display: grid;
  place-items: center;
  /* coloring with the same color */
  border: 2px solid var(--color);
  color: var(--color);
  /* font responsive to parent container */
  font-size: calc(var(--width) / 3)
}

#container hr {
  /* responsive width */
  width: 100%;
  /* removing a little bug if we use GRID */
  margin: 0;
}

<div id="container">
  <span>97</span>
  <hr>
  <span>100</span>
</div>