How to progress bar with ng-style

Question

I am trying to make a progress bar with ng-style. The problem is that, when I make it, the progress slider goes only by middle, and does not cover the whole bar. The progress ba

Answer 1

The DEMO

.c-progress-box {
  margin-left: 40px;
  min-width: 240px;
  position: relative;
  top: 8px;
  border: none;
}!important

.c-progress-box .c-percentage-cur .c-num {
  margin-right: 5px;
}!important

.c-progress-box .c-progress-bar {
  width: 100%;
  height: 12px;
  background: #f2f1f1;
  margin-bottom: 3px;
  box-shadow: 0 0 2px #D5D4D4 inset;
  position: relative;
}!important

.c-progress-box .c-progress-bar .c-inner {
  position: relative;
  width: 0;
  height: 100%;
  background: #239bd6;
}!important

.c-progress-bar .inner {
  height: 0;
  width: 0;
  transition: all 1s ease-out;
}!important

.c-progress-bar-slider .inner {
  transition: none;
}!imporatant

.c-progress-bar-slider .inner:after {
  content: " ";
  width: 5px;
  height: 14px;
  ;
  background-color: #ccc;
  position: absolute;
  right: -2px;
  top: -2px;
  border: 1px solid #bbb;
  border-radius: 2px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
  margin: 0px;
}!important

.c-progress-slider {
  opacity: 0;
  width: 100%;
  height: 15px;
  position: absolute;
  top: 0px;
  left: 0px;
  cursor: pointer;
  z-index: 1;
}!important