JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<ul id="most-commented">

    <li>
    <a href="#" rel="bookmark" title="">記事1</a>

    <span class="comment-bar"><span class="comment-count">258</span></span>
    </li>
    
    <li>
    <a href="#" rel="bookmark" title="">記事2</a>

    <span class="comment-bar"><span class="comment-count">206</span></span>
    </li>
    
    <li>
    <a href="#" rel="bookmark" title="">記事3</a>

    <span class="comment-bar"><span class="comment-count">144</span></span>
    </li>
    
    <li>
    <a href="#" rel="bookmark" title="">記事4</a>

    <span class="comment-bar"><span class="comment-count">53</span></span>
    </li>


</ul>

CSS

#most-commented {
    width: 400px;
}

#most-commented li {
    list-style: none;
}

#most-commented a {
    display: block;
}
#most-commented .comment-bar {
    display: inline-block;
    position: relative;
    height: 30px;
    width: 0;
    margin: 5px 0;
    padding-left: 20px;
    background-color: #999;
}

#most-commented .comment-count {
    display: inline-block;
    position: absolute;
    right: -20px;
    top: -5px;
    width: 34px;
    height: 34px;
    border-width: 3px;
    border-style: solid;
    border-color: #FFF;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    text-align: center;
    line-height: 34px;
    background-color: #6CAC1F;
    font-size: 13px;
    font-weight: bold;
    color: #FFF;
}

JavaScript

$(document).ready(function() {
    var maxWidth, maxCount;
    $('#most-commented li').each(function(i) {
        var $this = $(this);
        var thisCount = ~~$this.find('.comment-count').text();

        if ( i == 0 ) {
            maxWidth = $this.width() - 40;
            maxCount = thisCount;
        }
        var thisWidth = (thisCount / maxCount) * maxWidth;
        $this.find('.comment-bar').animate({
            width : thisWidth
        }, 200, 'swing');
    });
});