Progress Stages

circular progress stages

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="bar">
  <div class="circle fill">General Information about event</div>
  <div class="circle">Event’s Opportunity</div>
</div>

CSS

/*custom font*/
@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans);

* {margin: 0; padding: 0;}

html, body {min-height: 100%;}

body {
	text-align: center;
	padding-top: 100px;
	background: #689976;
	background: linear-gradient(#689976, #ACDACC);
	font-family: 'Merriweather Sans', arial, verdana;
}
.bar {
  position: relative;
  height: 100px;
  width: 2px;
  background-color: #ececec;
  margin-left: 30px;
}
.bar.fill {
  background-color: #b2cb1d;
}
.circle {
  position: absolute;
  background-color: #ececec;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-left: -7px;
  text-indent: 30px;
  white-space: nowrap;
  line-height: 15px;
}
.circle:first-child {
  top: -1px;
}
.circle:last-child {
  bottom: -1px;
}
.circle.fill {
  background-color: #b2cb1d;
  width: 19px;
  height: 19px;
  margin-left: -9px;
  line-height: 19px;
}
.circle.fill:before{
  content:"\2713";
  position: absolute;
  top: 1px;
  left:-26px;
  color:#fff;
}