A Pen by Marcos Ojeda.

A-Pen-by-Marcos-Ojeda.markdown

A Pen by Marcos Ojeda

A Pen by Marcos Ojeda on CodePen.

License.

index.html

<div class="container">
  <h2>The Idea of Math</h2>
  <div class="progress">
<!--
    <span class="unit completed"></span>
    <span class="unit completed"></span>
    <span class="unit started"></span>
    <span class="unit unstarted"></span>
    <span class="unit unstarted"></span>
    <span class="unit unstarted"></span>
-->
  </div>
</div>

script.jsx

/** @jsx React.DOM */

var ProgSpan = React.createClass({
  render: function(){}
});

var Dotty = React.createClass({
  getInitialState: function() {
    return {timeWatched: 0};
  },
  watchSome: function() {
    this.setState({
      timeWatched: (this.state.timeWatched + 1)
    });
  },
  componentDidMount: function() {
    this.interval = setInterval(this.watchSome, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    var progArray = 
    var progress = 
    return (
      <div>
        {progress}
      </div>);
  }
});

$(".container").on("click", function(e){
  $(".unit").eq(2).toggleClass("started");
});

style.less

@import url(http://fonts.googleapis.com/css?family=Varela+Round);

@mathDomainColor: #3b8fa3;
.container { 
  background-color: @mathDomainColor; 
  box-sizing: border-box;
  width: 700px;
  height: 150px;
  padding: 15px 25px;
  position: relative;
}
.head, h2 {font-family: "Varela Round", sans-serif; }

h2 { 
  color: white; 
  position: absolute;
  text-rendering: optimizeLegibility;
}

.progress { 
  display: inline-block;
  box-sizing: border-box;
  padding-bottom: 5px;
  position: absolute; 
  right: 15px;
  top: 40px;
}

.unit {
  transition: all 500ms ease;
  @rad: 3px;
  width: 0; 
  height: 2 * @rad;
  border-radius: @rad;
  border-left: @rad solid darken(@mathDomainColor, 10%);
  border-right: @rad solid darken(@mathDomainColor, 10%);
  display: inline-block;
  margin-right: 15px;
  
  &:last-child { margin-right: 0;}
  
  &.unstarted { border-color: lighten(@mathDomainColor, 20%);}
  &.started { background-color: transparent;
    width: 0;
    border-left: @rad solid darken(@mathDomainColor, 10%);
    border-right: @rad solid lighten(@mathDomainColor, 20%);
  }
}