JSFiddle - React, Tailwind, and code Playground

by creativecouple

HTML

<script src="http://creativecouple.github.com/jquery-timing/jquery-timing.min.js"></script>
<div class="ruler"><span class="bubble">*</span></div>

CSS

body {
    background: #ccc;
    margin: 5px;
}

.ruler {
    font-size: 15px;
    height: 15px;
    padding: 7px;
    margin: 0;
    overflow: hidden;
    position: relative;
    background: url(http://www.htmlgoodies.com/images/white.gif) repeat-x scroll center center;
    float: left;
    clear: left;
}

.bubble {
    position: absolute;
    left: 7px;
    top: 7px;
    width: 13px;
    height: 13px;
    margin: 0;
    padding: 1px;
    overflow: hidden;
    color: white;
    background: green;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}

.tick {
    display: inline-block;
    width: 15px;
    height: 15px;
    color: #ccc;
    overflow: hidden;
    padding: 0;
    margin: 0 35px 0 0;
    cursor: pointer;
    text-align: center;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    background: white;
}
.tick:last-child {
    margin-right: 0
}
.tick:hover {
    background: #888 !important;
    color: black;
}

JavaScript

// add ticks to ruler
$('.ruler').repeat().append('<span class="tick">+').until(6);

// define animation
$('.tick').click(function() {
    var $bubble = $(this).siblings('.bubble'),
        dir = $(this).position().left > $bubble.offset().left ? 1 : -1;

    function filter() {
        return dir*($(this).position().left-$bubble.position().left) >= 0;
    }

    $bubble.stop(true).animate({left: $(this).position().left}, 800)
        .siblings('.tick').unrepeat().filter(filter)
        .repeat(20).not(filter).unrepeat().stop(true)
        .css({backgroundColor:'lime'}).animate({backgroundColor:'white'},'slow');
});