Example of stars for CSS rating effect

What? What star coat? Well, let’s look at the picture to make it clearer:

If you look closely, you will find a pattern: the number of highlighted stars can be dynamically changed according to the percentage/score.

Step by step diagram:

This effect can be achieved by adding multiple structures if you encounter a situation where one star is worth one point, but there is no half star (or if there is, just add a half-star class name).

But considering that the stars also had to have a gradient effect, I almost went to talk to the designer (of course, to ask them to change it to non-gradient).

But if we really go there, it will seem that we are too unprofessional. We can't even achieve good looking effects, so what's the point of calling it front end?

Sit down and look at the design draft.

If you look at it directly like this, you may not have any ideas, but you can think about it in another way:

First think about how to achieve the following effect?

How about it? After reading this, have you got some ideas on how to achieve the star effect? ! Okay, dismissed.

Haha, but it doesn’t matter if you don’t have it. You can take a look at the implementation of this progress bar first. Then I looked for ideas from him (this is my idea when I was developing, very stupid and "pragmatic"):

The structure is as follows:

The structure is very simple, the main core code is as follows:

<div class="grade-progress-bg">
    <div class="grade-star-gradual">
        <span class="progress" style="width: 50%;"></span>
    </div>
</div>

The corresponding effect is clearer if we look at the structural model directly:

As shown in the figure,

Among them, div.grade-star-gradual is responsible for the gray background bar.

span.progress is responsible for the colored progress bar

Div.grade-progress-bg is responsible for wrapping the two and aligning them with the 100% text on the right.

The percentage width of span.progress is used to simulate the percentage of the data by taking up the proportion of the gray bar. It seems extraordinarily simple.

Implementation of colored stars :

Using this idea, the difference between a colored progress bar and a colored star progress bar is actually the stars (this is also nonsense)

But the key idea is not to think of the stars as a progress bar .

In other words, the star rating is implemented in the same way as the general progress bar effect. The only difference is the presence or absence of stars.

So how do you add stars to a normal progress bar? My design major still gave me some inspiration:

As long as you cover the colorful progress bar with a hollow star pattern, wouldn’t all you see be stars? !

For example:

Then the actual progress bar looks like this:

After putting on the gorgeous coat, it looks like this:

Don’t you feel like you’ve made a great deal again?

The code design is the same as the previous progress bar. The background color is initially gray, and the stars are five small gray stars on top.

Then when there is data worthwhile, changing the width of the color bar span.progress to a percentage can achieve a visual change in the number of stars

Structurally, it is consistent with the progress bar, but for the sake of the "outer coat" of this hollow star, I added an empty structure as the younger brother of span. You can also use a pseudo-class to play with it at will.

<div class="grade-progress-box">
    <div class="grade-star-bg">
      <div class="grade-star-gradual">
        <span class="progress" style="width: 100%;"></span>
        <div class="grade-star-img bgsize"></div>//Hollow star image</div>
   </div>
    <div class="grade-number grade-number1">5 points</div>
</div>

But you must ensure that the "outer garment is worn appropriately", that is, it is well-cut and not too revealing.

The color around the hollow stars should blend with the color around the progress bar. I've used white here so it's easier to blend.

Finally, the percentage and points used for display can be easily bound and displayed with the syntax of Vue.

As for the dynamic filling effect from left to right , you just need to simply use CSS transition and listen to the change of width.

Normal progress bar

.grade-progress-box

  .grade-progress-bg

    .grade-star-gradual #[span.progress(:style="{width: (Number(DBData.Inv)*100>100?100:Number(DBData.Inv)*100).toFixed(0) + '%'}")]

  .grade-number {{(Number(DBData.Inv)*100>100?100:Number(DBData.Inv)*100).toFixed(2)}}%

style

grade-progress-box:after {

    content: "";

    display: block;

    clear: both;

    visibility: hidden;

    overflow: hidden;

  } 

  .grade-progress-bg {

    display: table-cell;

    vertical-align: middle;

    width: 4.3rem;

    height: .14rem;

    overflow: hidden;

  }

  .grade-star-gradual {

    height: 0.16rem;

    -webkit-border-radius: .15rem;

    border-radius: .15rem;

    overflow: hidden;

    background: #e5e5e5;

  }

  .grade-star-gradual span.progress {

    width: 0;

    height: 100%;

    display: block;

    -webkit-border-radius: .15rem;

    border-radius: .15rem;

    -webkit-transition: width 1s ease-out;

    -o-transition: width 1s ease-out;

    transition: width 1s ease-out;

    background: -webkit-gradient(linear, left top, right top, from(#f23f5c), to(#fea94e));

    background: -o-linear-gradient(left, #f23f5c, #fea94e 100%);

    background: linear-gradient(to right, #f23f5c, #fea94e 100%);

    background: -webkit-linear-gradient(left, #f23f5c, #fea94e 100%);

  }

Star progress bar

.grade-progress-box

  .grade-star-bg

    .grade-star-gradual #[span.progress(:style="{width: (DBData.Sat/5*100).toFixed(0) + '%'}")]

      .grade-star-img

  .grade-number.grade-number1 {{DBData.Sat}} points

style

.grade-star-bg {

    position: relative;

    display: table-cell;

    width: 4.46rem;

    height: .5rem;

    overflow: hidden;

    margin-right: .22rem;

    vertical-align: middle;

  }

  .grade-star-gradual {

    height: 0.16rem;

    -webkit-border-radius: .15rem;

    border-radius: .15rem;

    overflow: hidden;

    background: #e5e5e5;

  }

  .grade-star-bg .grade-star-gradual {

    height: 100%;

  }

  .grade-star-img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: url(data:image/png;base64,) no-repeat;

    -webkit-background-size: 100% 100% !important;

    background-size: 100% 100% !important;

  }

Okay, another one done.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.