CodePen Embed - Donut Progress Bar

<div class="container">
    <div class="progress">
        <div class="progress__bar">
            <div class="progress__bar-bullet"></div>
        </div>
        <div class="progress__bg-placeholder"></div>
        <ul class="progress__grid">
            <li class="progress__bullet-placeholder-item">
                <div class="progress__bullet-placehoder"></div>
            </li>
            <li class="progress__bullet-placeholder-item">
                <div class="progress__bullet-placehoder"></div>
            </li>
            <li class="progress__bullet-placeholder-item">
                <div class="progress__bullet-placehoder"></div>
            </li>
            <li class="progress__bullet-placeholder-item">
                <div class="progress__bullet-placehoder"></div>
            </li>
            <li class="progress__bullet-placeholder-item">
                <div class="progress__bullet-placehoder"></div>
            </li>
            <li class="progress__bullet-placeholder-item">
                <div class="progress__bullet-placehoder"></div>
            </li>
            <li class="progress__bullet-placeholder-item">
                <div class="progress__bullet-placehoder"></div>
            </li>
            <li class="progress__bullet-placeholder-item">
                <div class="progress__bullet-placehoder"></div>
            </li>
            <li class="progress__bullet-placeholder-item">
                <div class="progress__bullet-placehoder"></div>
            </li>
            <li class="progress__bullet-placeholder-item">
                <div class="progress__bullet-placehoder"></div>
            </li>
        </ul>
    </div>
    <ul class="list__grid">
        <li class="list__item list__item--selected"><img src="http://res.cloudinary.com/dt4qeehms/image/upload/v1519439802/progress%20bar/homer.png" />
            <p>Homer</p>
        </li>
        <li class="list__item"><img src="http://res.cloudinary.com/dt4qeehms/image/upload/v1519439801/progress%20bar/marge.png" />
            <p>Marge</p>
        </li>
        <li class="list__item"><img src="http://res.cloudinary.com/dt4qeehms/image/upload/v1519439801/progress%20bar/bart.png" />
            <p>Bart</p>
        </li>
        <li class="list__item"><img src="http://res.cloudinary.com/dt4qeehms/image/upload/v1519439801/progress%20bar/lisa.png" />
            <p>Lisa</p>
        </li>
        <li class="list__item"><img src="http://res.cloudinary.com/dt4qeehms/image/upload/v1519439801/progress%20bar/maggie.png" />
            <p>Maggie</p>
        </li>
        <li class="list__item"><img src="http://res.cloudinary.com/dt4qeehms/image/upload/v1519439801/progress%20bar/burns.png" />
            <p>Mr Burns</p>
        </li>
        <li class="list__item"><img src="http://res.cloudinary.com/dt4qeehms/image/upload/v1519439802/progress%20bar/moe.png" />
            <p>Moe</p>
        </li>
        <li class="list__item"><img src="http://res.cloudinary.com/dt4qeehms/image/upload/v1519439802/progress%20bar/krusty.png" />
            <p>Krusty</p>
        </li>
        <li class="list__item"><img src="http://res.cloudinary.com/dt4qeehms/image/upload/v1519439802/progress%20bar/grampa.png" />
            <p>Grampa</p>
        </li>
        <li class="list__item"><img src="http://res.cloudinary.com/dt4qeehms/image/upload/v1519439801/progress%20bar/ned.png" />
            <p>Ned</p>
        </li>
    </ul>
    <div class="btns">
        <button class="btn btns__back"></button>
        <button class="btn btns__next"></button>
    </div>
</div>

html
  box-sizing: border-box

*, *:before, *:after
  box-sizing: inherit

html, body
  position: relative
  height: 100%
  width: 100%
  margin: 0
  padding: 0
  overflow-y: auto
  background:
    image: radial-gradient(ellipse farthest-corner at left bottom, #FEE531 0%, #FAD638 100%)
    repeat: no-repeat
    size: cover
    position: center

p, li, ul
  margin: 0
  padding: 0

ul
  list-style: none

.container
  text-align: left
  width: 300px
  position: absolute
  top: 12px
  left: 0
  right: 0
  margin: 0 auto
  min-height: 520px
  max-height: 540px
  height: 90%
  transform: translateY(0)
  &:after
    content: ""
    display: table
    clear: both

.progress
  position: relative
  display: inline-block
  width: 100px
  height: 90%
  transform: translateY(11%)
.progress__bar
  top: 0
  height: 0
  transform: translateY(16px)
  width: 20px
  z-index: 10
  border-radius: 8px
  position: absolute
  left: 0
  right: 0
  margin: 0 auto
  transition: all 0.6s ease-in-out
  background:
    image: url('http://res.cloudinary.com/dt4qeehms/image/upload/v1519439802/progress%20bar/bg_bar.png')
    repeat: repeat-y
    size: 20px
    position: top
.progress__bar-bullet
  transition: all 0.6s ease-in-out
  position: absolute
  width: 40px
  height: 40px
  bottom: -27px
  border-radius: 50%
  right: -50%
  background:
    image: url(http://res.cloudinary.com/dt4qeehms/image/upload/v1519439803/progress%20bar/donut.png)
    size: contain
    position: center
    repeat: no-repeat
.progress__grid
  height: 100%
  width: 100%
.progress__bullet-placeholder-item
  position: relative
  height: 10%
  width: 100%

.progress__bullet-placehoder
  position: absolute
  top: 0
  bottom: 0
  left: 0
  right: 0
  margin: auto auto
  height: 40px
  width: 40px
  border-radius: 50%
  background-color: orange
  transition: opacity 1.5s ease-in-out
.progress__bullet-placehoder--hide
  transition: opacity 0.1s ease-in-out
  opacity: 0
.progress__bg-placeholder
  border-radius: 16px
  z-index: 1
  width: 16px
  height: 90%
  background-color: orange
  position: absolute
  left: 0
  right: 0
  top: 0
  bottom: 0
  margin: auto auto
.list__grid
  position: relative
  margin-top: 24px
  display: inline-block
  width: 100px
  height: 90%

$itemHeight: 10%
$itemZindex: 100

.list__item
  position: relative
  height: 30%
  background-color: #39b6ef
  border: solid white 4px
  border-radius: 3px
  padding: 4px
  position: absolute
  width: 100px
  text-align: center
  transition: all 0.4s ease-in-out
  img
    height: 100%
    position: absolute
    margin: auto
    top: 0
    bottom: 0
    right: 0
    left: 0
    transition: height 0.2s 0.5s linear
  p
    writing-mode: vertical-rl
    text-orientation: upright
    letter-spacing: -2px
    user-select: none
    color: white
    font-size: 0.78rem
    font-weight: bold
    text-transform: uppercase
    position: absolute
    right: 2px
    top: 6%
    margin: auto 0
  &:nth-child(2n)
    right: 20%

  &:nth-child(1)
    top: $itemHeight * 0
    z-index: $itemZindex + 0
  &:nth-child(2)
    top: $itemHeight * 1
    z-index: $itemZindex - 1
  &:nth-child(3)
    img
      height: 60%
    top: $itemHeight * 2
    z-index: $itemZindex - 2
  &:nth-child(4)
    img
      height: 60%
    top: $itemHeight * 3
    z-index: $itemZindex - 3
  &:nth-child(5)
    img
      height: 45%
    top: $itemHeight * 4
    z-index: $itemZindex - 4
  &:nth-child(6)
    top: $itemHeight * 5
    z-index: $itemZindex - 5
  &:nth-child(7)
    top: $itemHeight * 6
    z-index: $itemZindex - 6
  &:nth-child(8)
    top: $itemHeight * 7
    z-index: $itemZindex - 7
  &:nth-child(9)
    top: $itemHeight * 8
    z-index: $itemZindex - 8
  &:nth-child(10)
    top: $itemHeight * 9
    z-index: $itemZindex - 9
.list__item--selected
  img
    height: 120%
.list__item--translate
  transform: translate3d(130%, 0, 0)
.btns
  z-index: -1
  position: relative
  width: 100%
  height: 8%
  right: 8%
  bottom: -9%
  margin-bottom: 24px
.btn
  &:hover
    transform: scale(1.4)
  cursor: pointer
  transition: transform ease-in-out 0.1s
  border: none
  outline: none
  background:
    color: transparent
    position: center
    size: contain
    repeat: no-repeat
  position: absolute
  width: 28%
  height: 100%
.btn.btns__back
  background:
    image: url(http://res.cloudinary.com/dt4qeehms/image/upload/v1519439802/progress%20bar/arrow-back.svg)
  left: 0
.btn.btns__next
  right: 0
  background:
    image: url(http://res.cloudinary.com/dt4qeehms/image/upload/v1519439802/progress%20bar/arrow-next.svg)

.btn--click
  &:hover
    transform: scale(1.6)

View Compiled

var next              = document.querySelector('.btns__next');
var back              = document.querySelector('.btns__back');
var bar               = document.querySelector('.progress__bar');
var placeholders      = document.querySelectorAll('.progress__bullet-placeholder-item');
var placeholderBullet = document.querySelectorAll('.progress__bullet-placehoder');
var barBullet         = document.querySelector('.progress__bar-bullet');
var card              = document.querySelectorAll('.list__item');

var MAX_ITEMS     = placeholders.length;
var THROTTLE_TIME = 400;
var step          = 0;
var currentZIndex = parseInt(window.getComputedStyle(card[0]).zIndex);

next.addEventListener('click', _.throttle(stepForward, THROTTLE_TIME));
back.addEventListener('click', _.throttle(stepBack, THROTTLE_TIME));

function stepForward() {
  if (step < MAX_ITEMS - 1) {
    currentZIndex++;
    next.classList.add('btn--click');
    toggleDisableBtn(next);
    bar.style.height = (++step * 10) + '%';
    barBullet.style.transform = 'rotate(' + 120 * step + 'deg)';
    renderPlaceholder();

    card[step].classList.add('list__item--translate');
    card[step].classList.toggle('list__item--selected');
    card[step - 1].classList.toggle('list__item--selected');
    setTimeout(function () {
      card[step].classList.remove('list__item--translate');
    }, 400);
    setTimeout(function () {
      card[step].style.zIndex = currentZIndex;
      next.classList.remove('btn--click');
    }, 200);
  }
}

function stepBack () {
  if (step > 0) {
    currentZIndex++;
    toggleDisableBtn(back);
    bar.style.height = (--step * 10) + '%';
    barBullet.style.transform = 'rotate(' + 120 * step + 'deg)';
    back.classList.add('btn--click');
    renderPlaceholder();

    card[step].classList.toggle('list__item--selected');
    card[step + 1].classList.toggle('list__item--selected');
    card[step].classList.add('list__item--translate');
    setTimeout(function () {
      card[step].classList.remove('list__item--translate');
    }, 400);
    setTimeout(function () {
      card[step].style.zIndex = currentZIndex;
      back.classList.remove('btn--click');
    }, 200);
  }
}

function renderPlaceholder () {
  Array.prototype.forEach.call(placeholderBullet, function(element, index) {
    if (index < step) {
      element.classList.add('progress__bullet-placehoder--hide');
    } else {
      element.classList.remove('progress__bullet-placehoder--hide');
    }
  });
}

function toggleDisableBtn (btn) {
  btn.disabled = true;
  setTimeout(function () {
    btn.disabled = false;
  }, THROTTLE_TIME)
}

This Pen is owned by ErreC on CodePen.

See more by @Errec on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.js