Slider Bubbles

Slider bubbles that do not overflow

by Robert Dodd

HTML

<div class="wrapper">
  <span class="floater"></span>
  <div class="bar" style="width:100%">
    <div class="bubble" style=""></div>
  </div>
</div>

<div class="wrapper">
  <span class="floater"></span>
  <div class="bar" style="width:50%">
    <div class="bubble" style=""></div>
  </div>
</div>

<div class="wrapper">
  <span class="floater"></span>
  <div class="bar" style="width:0%">
    <div class="bubble" style=""></div>
  </div>
</div>

CSS

.wrapper {
  width: 250px;
  height: 10px;
  border: 1px solid black;
  margin-bottom: 50px;
}

.bar {
  background: green;
  height: 10px;
  min-width: 25px;
}

.bubble {
  background: blue;
  height: 20px;
  width: 50px;
  float: right;
  margin-right: -25px;
  margin-top: 4px;
}

.floater {
  float: right;
  height: 10px;
  width: 25px;
}