Tagged: 5 Star Rating Review

5 Star Product Rating Review Widget in CSS 0

5 Star Product Rating Review Widget in CSS

Today, We want to share with you 5 Star Product Rating Review Widget in CSS.In this post we will show you how to display rating stars in javascript, hear for Star Rating System with Ajax, PHP and MySQL we will give you demo and example for implement.In this post, we will learn about Simple 5-star Rating System with CSS and Html Radios with an example.

5 Star Product Rating Review Widget in CSS

There are the Following The simple About 5 Star Product Rating Review Widget in CSS Full Information With Example and source code.

As I will cover this Post with live Working example to develop how to make a star rating css, so the css star rating radio buttons for this example is following below.

5 Star Product Rating Review Widget in CSS - 5 Star Product Rating Review Widget in CSS

5 Star Product Rating Review Widget in CSS

star customer product review rating bright yellow stars score using JavaScript / jquery / CSS

HTML Part

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-offset-1 col-md-10 col-sm-12 main-section">
                <div class="col-md-12">
                    <h3>CUSTOMER REVIEWS</h3>
                    <hr>
                </div>
                <div class="row">
                    <div class="col-md-3 col-sm-3 col-xs-12 rating-part-left text-center">
                        <h1>1.3</h1>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <p>Based on 461 reviews</p>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"></div>
                        </div>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:8%"></div>
                        </div>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:4%"></div>
                        </div>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:0%"></div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-12 rating-part-right">
                        <div class="row">
                            <div class="col-md-12">
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <span>70%</span>
                            </div>
                            <div class="col-md-12">
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star-o" aria-hidden="true"></i>
                                <span>20%</span>
                            </div>
                            <div class="col-md-12">
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star-o" aria-hidden="true"></i>
                                <i class="fa fa-star-o" aria-hidden="true"></i>
                                <span>8%</span>
                            </div>
                            <div class="col-md-12">
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star-o" aria-hidden="true"></i>
                                <i class="fa fa-star-o" aria-hidden="true"></i>
                                <i class="fa fa-star-o" aria-hidden="true"></i>
                                <span>4%</span>
                            </div>
                            <div class="col-md-12">
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star-o" aria-hidden="true"></i>
                                <i class="fa fa-star-o" aria-hidden="true"></i>
                                <i class="fa fa-star-o" aria-hidden="true"></i>
                                <i class="fa fa-star-o" aria-hidden="true"></i>
                                <span>0%</span>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="row review-section">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <hr>
                        <h3>Reviews</h3>
                        <hr>
                    </div>
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="row">
                            <div class="col-md-4 col-md-4 col-xs-4 product-rating-panel-left">
                                <div class="row">
                                    <div class="col-md-4 col-sm-4 col-xs-12">
                                        <img src="http://i.pravatar.cc/500?img=8">
                                    </div>  
                                    <div class="col-md-8 col-sm-8 col-xs-12">
                                        <p>10 days ago</p>
                                        <span>HSIEH WAN CHEN</span><br>
                                        <small>Review Info</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-8 col-sm-8 col-xs-8 product-rating-panel-right">
                                <div class="row">
                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star-o" aria-hidden="true"></i>
                                    </div>
                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                        <p>I loved the way my skin felt after using this.I loved the way my skin felt after using this.I loved the way my skin felt after using this.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="row">
                            <div class="col-md-4 col-md-4 col-xs-4 product-rating-panel-left">
                                <div class="row">
                                    <div class="col-md-4 col-sm-4 col-xs-12">
                                        <img src="http://i.pravatar.cc/500?img=7">
                                    </div>  
                                    <div class="col-md-8 col-sm-8 col-xs-12">
                                        <p>20 days ago</p>
                                        <span>S. Amber Martinez</span><br>
                                        <small>Review Info</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-8 col-sm-8 col-xs-8 product-rating-panel-right">
                                <div class="row">
                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                    </div>
                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                        <p>Hello Friends, I have started youtube channel. Name of the channel is Angularjs Examples. Here I have uploaded the first video about Tutorials Angularjs. and will continue to provide videos on different topics of Angularjs. Please share the message with needy people who want to do Angularjs. So, please Like, Share and Subscribe the channel. Thank You.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="row">
                            <div class="col-md-4 col-md-4 col-xs-4 product-rating-panel-left">
                                <div class="row">
                                    <div class="col-md-4 col-sm-4 col-xs-12">
                                        <img src="http://i.pravatar.cc/500?img=9">
                                    </div>  
                                    <div class="col-md-8 col-sm-8 col-xs-12">
                                        <p>28 days ago</p>
                                        <span>Christina Arendt</span><br>
                                        <small>Review Info</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-8 col-sm-8 col-xs-8 product-rating-panel-right">
                                <div class="row">
                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star-o" aria-hidden="true"></i>
                                        <i class="fa fa-star-o" aria-hidden="true"></i>
                                    </div>
                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                        <p>Hello! I am angular Web-devloper and infinityknow is my web technologies blog. My specialities are Vuejs,API,angularjs,Vuejs,PHP, API, jQuery,Earn money,HTML,CSS eCommerce,JS,Laravel, CMS and bespoke web application development.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="row">
                            <div class="col-md-4 col-md-4 col-xs-4 product-rating-panel-left">
                                <div class="row">
                                    <div class="col-md-4 col-sm-4 col-xs-12">
                                        <img src="http://i.pravatar.cc/500?img=10">
                                    </div>  
                                    <div class="col-md-8 col-sm-8 col-xs-12">
                                        <p>29 days ago</p>
                                        <span>Amber Johnson</span><br>
                                        <small>Review Info</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-8 col-sm-8 col-xs-8 product-rating-panel-right">
                                <div class="row">
                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star-o" aria-hidden="true"></i>
                                        <i class="fa fa-star-o" aria-hidden="true"></i>
                                        <i class="fa fa-star-o" aria-hidden="true"></i>
                                        <i class="fa fa-star-o" aria-hidden="true"></i>
                                    </div>
                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                        <p>pakainfo is the most popular Programming & Web Development blog. Our mission is to provide the best online resources on programming and web development.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="row">
                            <div class="col-md-4 col-md-4 col-xs-4 product-rating-panel-left">
                                <div class="row">
                                    <div class="col-md-4 col-sm-4 col-xs-12">
                                        <img src="http://i.pravatar.cc/500?img=11">
                                    </div>  
                                    <div class="col-md-8 col-sm-8 col-xs-12">
                                        <p>2 month ago</p>
                                        <span>Jaime C</span><br>
                                        <small>Review Info</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-8 col-sm-8 col-xs-8 product-rating-panel-right">
                                <div class="row">
                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                    </div>
                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                        <p>We deliver the useful and best tutorials for web professionals — developers, programmers, freelancers and site owners. Any visitors of this site are free to browse our tutorials, live demos and download scripts.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS Part

<style type="text/css">
body{
    background-color:#f1f1f1;
}
body h3{
    margin: 0px;
}
.main-section{
    background-color:#fff;
    padding:30px 15px;
}
.rating-part-left h1{
    font-size:75px;
    margin:0px;
    color: #528ec1;
}
.rating-part-left i{
    font-size:22px;
    padding:2px;
    color:#FDC91B;
}
.rating-part-left p{
    font-size:18px;
    color:#504F55;
}
.progress{
    background: #f1f1f1;
    box-shadow: none;
    border-radius: 0px;
    margin:7px 0px;
}
.progress .progress-bar{
    background: #528ec1;
}
.rating-part-right i,.product-rating-panel-right i{
    font-size: 20px;
    padding:4px 0px;
    color:#FDC91B;
}
.rating-part-right span{
    color:#528ec1;
    font-size:17px;
    padding-left: 5px;
}
.review-section{
    padding: 0px 15px;
}
.product-rating-panel-left img{
    height:75px;
    width:75px;
    border-radius: 50%;
    border:2px solid #528ec1;
}
.product-rating-panel-left p{
    margin:0px;
    font-size:17px;
    color:#B3B5B4;
}
.product-rating-panel-left span{
    font-size:19px;
}
.product-rating-panel-left small{
    color:#B3B5B4;
}
.product-rating-panel-right p{
    font-size: 18px;
    color:#919191;
}

    </style>

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about 5 Star Product Rating Review Widget in CSS.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.