css toggle switch + loading state

Question

I'm trying to make a toogle switch with pure css. I've got it working so far, but I would like to add a third state "pending" beeing a middle state between "on" and "off" (Usually, there is a delay of data processing when toggling on/off). So I would like to have a spinner on the white circle in that 'pending'state.

I've tried many things but got nothing satisfying so far.

Here is the basic code with only two state. How can I modify it do to what i want? Thanks.

function ToogleStateCtrl($scope) {
  $scope.plugin = {
    enabled: false
  }

  $scope.toggleState = function() {
    console.log('toggling from ' + $scope.plugin.enabled + ' to ' + !$scope.plugin.enabled);
    $scope.plugin.pending = true;
    //delay to simulate pending state
    setTimeout(doToggle, 2000);
  }

  function doToggle() {
    console.log('do toggling')
    $scope.plugin.pending = false;
    $scope.plugin.enabled = !$scope.plugin.enabled;
    $scope.$apply()
  }
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 22px;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  border-radius: 20px;
  border: 1px solid red;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  -webkit-transition: .4s;
  transition: .4s;
}

.switch-slider.enabled {
  border-color: green;
  background-color: green;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

.switch-slider.enabled:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

css toggle switch + loading state

2 Answers