<!-- HTML code -->
<div class="bar-wrapper">
    <div class="bar-tracker"></div>
</div>

<!-- CSS code -->

.bar-wrapper {
  width: 160px;
  background-color: #9fdaf5;
  height: 16px;
  border-radius: 16px;
  overflow: hidden;
}

.bar-tracker {
  width: 0px;
  background: repeating-linear-gradient(
    45deg,
    #3498db,
    #3498db 10px,
    #2980b9 10px,
    #2980b9 20px
  );
  height: 16px;
  border-radius: 16px;
}

.bar-wrapper:hover .bar-tracker {
  animation: fillcolor 2s infinite ease;
}

@keyframes fillcolor {
  0% {
    width: 0px;
  }
  100% {
    width: 160px;
  }
}

<!-- HTML code -->
<div class="bar-wrapper">
    <div class="bar-tracker"></div>
</div>

<!-- CSS code -->
.bar-wrapper {
  width: 160px;
  background-color: #fef6e4;
  height: 16px;
  border-radius: 12px;
  overflow: hidden;
}

.bar-tracker {
  width: 0px;
  background-color: #e74c3c;
  height: 16px;
  border-radius: 12px;
}

.bar-wrapper:hover .bar-tracker {
  animation: fillcolor 2s infinite ease;
}

@keyframes fillcolor {
  0% {
    width: 0px;
  }
  100% {
    width: 160px;
  }
}

<!-- HTML code -->
<div class="bar-wrapper">
    <div class="bar-tracker"></div>
</div>

<!-- CSS code -->
.bar-wrapper {
  width: 160px;
  background-color: #f0e6f6;
  height: 16px;
  border-radius: 4px;
  overflow: hidden;
}

.bar-tracker {
  width: 0px;
  background-color: #9b59b6;
  height: 16px;
  border-radius: 4px;
}

.bar-wrapper:hover .bar-tracker {
  animation: fillcolor 2s infinite ease;
}

@keyframes fillcolor {
  0% {
    width: 0px;
  }
  100% {
    width: 160px;
  }
}

<!-- HTML code -->
<div class="bar-wrapper">
    <div class="bar-tracker"></div>
</div>

<!-- CSS code -->
.bar-wrapper {
  width: 160px;
  background-color: #f0f4f8;
  height: 16px;
}

.bar-tracker {
  width: 0px;
  background-color: #007bff;
  height: 16px;
}

.bar-wrapper:hover .bar-tracker {
  animation: fillcolor 1s infinite ease;
}

@keyframes fillcolor {
  0% {
    width: 0px;
  }
  100% {
    width: 160px;
  }
}

<!-- HTML code -->
<div class="bar-wrapper">
    <div class="bar-tracker"></div>
</div>

<!-- CSS code -->

.bar-wrapper {
  width: 160px;
  background-color: #9fdaf5;
  height: 16px;
  border-radius: 16px;
  overflow: hidden;
}

.bar-tracker {
  width: 0px;
  height: 16px;
  background: linear-gradient(90deg, #038aaf, #60ee6e);
  border-radius: 16px;
}

.bar-wrapper:hover .bar-tracker {
  animation: fillcolor 2s infinite ease;
}

@keyframes fillcolor {
  0% {
    width: 0px;
  }
  100% {
    width: 160px;
  }
}

<!-- HTML code -->
<div class="bar-wrapper">
    <div class="bar-tracker"></div>
</div>

<!-- CSS code -->

.bar-wrapper {
  width: 160px;
  height: 12px;
  background: #ddd;
  border-radius: 10px;
  position: relative;
}

.bar-tracker {
  width: 12px;
  height: 12px;
  background: #00b894;
  border-radius: 50%;
  position: absolute;
}

.bar-wrapper:hover .bar-tracker {
  animation: moveDot 1.5s infinite ease-in-out;
}

@keyframes moveDot {
  0% {
    left: 0;
  }
  100% {
    left: 148px;
  }
}

<!-- HTML code -->
<div class="bar-wrapper">
    <div class="bar-tracker"></div>
</div>

<!-- CSS code -->
.bar-wrapper {
  width: 160px;
  background-color: #f0f4f8;
  height: 16px;
  border-radius: 4px;
}

.bar-tracker {
  width: 0px;
  background: linear-gradient(90deg, #6c5ce7, #b0ade0, #6c5ce7);
  height: 16px;
  border-radius: 4px;
}

.bar-wrapper:hover .bar-tracker {
  animation: fillcolor 2s infinite ease-out;
}

<!-- HTML code -->
<div class="bar-wrapper">
    <div class="bar-tracker"></div>
</div>

<!-- CSS code -->

.bar-wrapper {
  width: 160px;
  background-color: #f0f4f8;
  height: 16px;
  border-radius: 4px;
}

.bar-tracker {
  width: 0px;
  background: repeating-linear-gradient(
    to right,
    #21eeb4 0px,
    #21e2ac 10px,
    #dfe6e9 10px,
    #dfe6e9 20px
  );
  height: 16px;
  border-radius: 4px;
}

.bar-wrapper:hover .bar-tracker {
  animation: fillcolor 2s infinite ease-out;
}

<!-- HTML code -->
<div class="bar-wrapper">
    <div class="bar-tracker"></div>
</div>

<!-- CSS code -->

.bar-wrapper {
  width: 160px;
  background-color: #f0f4f8;
  height: 16px;
  border-radius: 4px;
}

.bar-tracker {
  width: 0px;
  background: repeating-linear-gradient(
    to right,
    #21eeb4 0px,
    #21e2ac 10px,
    #dfe6e9 10px,
    #dfe6e9 20px
  );
  height: 16px;
  border-radius: 4px;
}

.bar-wrapper:hover .bar-tracker {
  animation: fillcolor 2s infinite ease-out;
}

<!-- HTML code -->
<div class="bar-wrapper">
    <div class="bar-tracker"></div>
</div>

<!-- CSS code -->
.bar-wrapper {
  width: 160px;
  height: 12px;
  background: #eee;
  overflow: hidden;
  border-radius: 8px;
  position: relative;
}

.bar-tracker {
  position: absolute;
  right: 0;
  height: 100%;
  width: 0%;
  background: #0984e3;
}

.bar-wrapper:hover .bar-tracker {
  animation: fillRight 2s infinite ease-in-out;
}

@keyframes fillRight {
  0%,
  100% {
    width: 0%;
  }
  50% {
    width: 100%;
  }
}