How can i make a circle progress bar?

Issue

I'd like to make a circular progress bar like this:

I was trying with this code.

.circular-progress{
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    margin: auto;
    background: linear-gradient( 0deg, black 50%, pink 50%);
    position: relative;
    transform: rotate(90deg);
 }
.circular-progress:before {
    content: "Hola";
    width: 12rem;
    height: 12rem;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    padding: .5rem;
    box-sizing: border-box;
    font-size: 2rem;
    background: #111 content-box;
    color: black;
    text-align: center;
    line-height: 8rem;
    transform: rotate(-90deg);
  }
  .circular-progress::after {
    width: 12rem;
    height: 12rem;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background: linear-gradient( transparent 50%; #111 50% );
    transform: scale(1.1) rotate(-90deg);
    text-align: center;
    color: #fff;
    line-height: 13rem;
  }

<div class="circular-progress"></div>

Solution

You can do it like this. Source is here: https://codepen.io/jagathish/pen/ZXzbzN

.progress{
  position: relative;
  margin: 4px;
  float:left;
  text-align: center;
}
.barOverflow{ /* Wraps the rotating .bar */
  position: relative;
  overflow: hidden; /* Comment this line to understand the trick */
  width: 90px; height: 45px; /* Half circle (overflow) */
  margin-bottom: -14px; /* bring the numbers up */
}
.bar{
  position: absolute;
  top: 0; left: 0;
  width: 90px; height: 90px; /* full circle! */
  border-radius: 50%;
  box-sizing: border-box;
  border: 5px solid #eee;     /* half gray, */
  border-bottom-color: #0bf;  /* half azure */
  border-right-color: #0bf;
}

<div class="progress">
  <div class="barOverflow">
    <div class="bar"></div>
  </div>
  <span>34</span>%
</div>

Answered By - Munkh-Erdene