Rating Star with progress Style with angular , Only CSS . no icons only css styles.

                            Many of the peoples using external libraries to show the rating progress in the website. But you know, no need to use external libraries for this type of simple elements. 

Here you are going to see how to make the above layouts with simple CSS and HTML in angular 12. For this you only need some good knowledge in HTML and CSS.

In this I'm going to do the above two styles of stars for rating. Incase you don't have time to read the whole doc you can get the code here and you need a video check here

Let's start discussing with the 

<div class="base" >
  <!--  rating stars starts-->
  <div class="cont" >
    <div class="star">
      <div class="overlay" ></div>
    </div>
    <div class="star">
      <div class="overlay" ></div>
    </div>
    <div class="star">
      <div class="overlay" ></div>
    </div>
    <div class="star">
      <div class="overlay"  ></div>
    </div>
    <div class="star">
      <div class="overlay" [style.width]="'90%'" ></div>
    </div>
  </div>
  <div class="cont" >
    <div class="sq-b">
      <div class="overlay-b"   ></div>
      <div class="star-b" ></div>
    </div>
    <div class="sq-b">
      <div class="overlay-b" ></div>
      <div class="star-b" ></div>
    </div>
    <div class="sq-b">
      <div class="overlay-b"  ></div>
      <div class="star-b" ></div>
    </div>
    <div class="sq-b">
      <div class="overlay-b"   ></div>
      <div class="star-b" ></div>
    </div>
    <div class="sq-b">
      <div class="overlay-b"  [style.width]="'60%'" ></div>
      <div class="star-b" ></div>
    </div>


  </div>
  <!--  rating stars starts-->
</div>

We have a 2 set of stars models here. In both section the star and overlay class will be change.

.cont{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin-bottom: 40px;
}
.star{
  height: 40px;
  width: 40px;
  clip-path: polygon(50% 0%, 61% 35%,
  98% 35%, 68% 57%,
  79% 91%, 50% 70%, 21% 91%,
  32% 57%, 2% 35%, 39% 35%);
  position: relative;
  background-color: black;
  margin-right: 10px;
}
.overlay{
  position: absolute;
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  background-color: #b4b1b1;
}
.sq-b{
  height: 40px;
  width: 40px;
  background-color: #e0e0e0;
  position: relative;
  margin-right: 10px;
  border-radius: 7px;
  overflow: hidden;
}

.star-b{
  height: 100%;
  width: 100%;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  position: absolute;
  top: 0;
  right: 0;
  background-color: #2c2b2b;
}
.overlay-b{
  position: absolute;
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  background-color: #3bbe3b;

}

.base{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;

} 

I think you can see the style class here. I use clip-path element to make star.

THANK YOU