Switch or move circular background from one element to another on click

Question

I want to animate color from one to another list whenever I click any list icon see in below image

.days-cal li {
  color: #d5d1e6;
  height: 36px;
  width: 36px;
  display: inline-block;
  border-radius: 19px;
  margin: 0 5px;
  padding-top: 06px;
  -webkit-transition: 0.5s linear;
  -moz-transition: 0.5s linear;
  -o-transition: 0.5s linear;
  transition: 0.5s linear;
}
.days-cal li.active {
  background: #4B916C;
  text-align: center;
  margin: 0px 0;
  padding-top: 6px;
}

<div class="expand-view inven-l">
  <div class="item">
    <ul class="days-cal">
      <li ng-class="{'active':weekOf==1}" ng-click="weekSelect(1)">Sun</li>
      <li ng-class="{'active':weekOf==2}" ng-click="weekSelect(2)">Mon</li>
      <li ng-class="{'active':weekOf==3}" ng-click="weekSelect(3)">Tue</li>
      <li ng-class="{'active':weekOf==4}" ng-click="weekSelect(4)">Wed</li>
      <li ng-class="{'active':weekOf==5}" ng-click="weekSelect(5)">Thu</li>
      <li ng-class="{'active':weekOf==6}" ng-click="weekSelect(6)">Fri</li>
      <li ng-class="{'active':weekOf==7}" ng-click="weekSelect(7)">Sat</li>

    </ul>
  </div>
</div>

Answer 1

Using Dummy Element and Transform:

One way to achieve this would be to use a dummy element inside the ul.days-cal which creates the circle and then translate it (using CSS transform) based on the index of the element that is clicked.

$('li').on('click', function() {
  var translateX = ($(this).index()) * 46; /* width + 2 * margin */
  $('ul.days-cal .circle').css('transform', 'translateX(' + translateX + 'px)');
});

.days-cal li {
  color: #d5d1e6;
  height: 36px;
  width: 36px;
  float: left;
  line-height: 36px;
  margin: 0 5px;
  padding-top: 6px;
  transition: 0.5s linear;
  text-align: center;
}
.days-cal {
  position: relative;
  padding: 0;
  list-style: none;
}
.days-cal li.circle {
  position: absolute;
  content: '';
  height: 36px;
  width: 36px;
  top: 6px;
  left: 0px;
  padding: 0px;
  margin: 0px 5px;
  background: #4B916C;
  border-radius: 50%;
  z-index: -1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expand-view inven-l">
  <div class="item">
    <ul class="days-cal">
      <li>Sun</li>
      <li>Mon</li>
      <li>Tue</li>
      <li>Wed</li>
      <li>Thu</li>
      <li>Fri</li>
      <li>Sat</li>
      <li class='circle'></li>
    </ul>
  </div>
</div>

---

Using Radial Gradients: (no extra element required)

Another way to achieve this without using any extra dummy elements would be to use radial gradients as background image for the ul.days-cal and then adjust the background-position of the gradient depending on the index of the element that is clicked.

The disadvantage of using radial gradient is that it won't work in IE9-.

$('li').on('click', function() {
  var translateX = ($(this).index()) * 46; /* width + 2 * margin */
  $('ul.days-cal').css('background-position', translateX + 'px 0px');
});

.days-cal li {
  color: #d5d1e6;
  height: 36px;
  width: 36px;
  float: left;
  line-height: 36px;
  margin: 0 5px;
  padding-top: 6px;
  transition: 0.5s linear;
  text-align: center;
}
.days-cal {
  position: relative;
  padding: 0;
  height: 42px;
  list-style: none;
  background-image: radial-gradient(36px 36px at 24px 24px, #4B916C 48.5%, transparent 51%);
  background-position: 0px 0px;
  transition: all 0.5s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expand-view inven-l">
  <div class="item">
    <ul class="days-cal">
      <li>Sun</li>
      <li>Mon</li>
      <li>Tue</li>
      <li>Wed</li>
      <li>Thu</li>
      <li>Fri</li>
      <li>Sat</li>
    </ul>
  </div>
</div>