A Pen by Gem Barrett.

index.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="progress-area">
<div id="progress-circle"></div>
</div>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>


<button>Next</button>

script.js

$("button").on("click", function () { 
    $('#progress-area').css('width', '+=60');
});

style.css

ul {
  margin:0;
  padding:0;
  font-size:0;
}
li {
  list-style:none;
  display:inline-block;
  font-size:50px;
  width:60px;
  height:60px;
  position:relative;
  z-index:1;
  text-align:center;
  margin:0;
  padding:0;
}

#progress-circle {
  background-color:cornflowerblue;
  border-radius:50%;
  z-index:0;
  width:60px;
  height:60px;
  position:absolute;
  top:0;
  right:0;
}

#progress-area {
  width:60px;
  position:relative;
  transition: all 0.5s ease;
}

button {
  margin-top:20px;
}

veKiE.markdown

veKiE

A Pen by Gem Barrett on CodePen.

License.