How to progress bar with ng-style

前端未结

关注

 2  1041

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

相关标签:

2条回答

眼角桃花

2021-01-24 05:04

Try This it will help you

<style>
    .progress-box {
     width: 100%;
    }

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

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

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

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

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

    .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;
    }

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

    </style>



    <ul>
            <li class="title"><h4> Progress slider</h4></li>
           <li class="desc-frame">
            <div class="progress-box" >
              <div class="progress-bar progress-bar-slider">
                <input class="progress-slider" type="range" min="0" max="100" ng-model="vm.progress">
                <div class="inner" ng-style="{ width: vm.progress + '%' || '0%' }"></div>
              </div>
              <br>
              <div class="percentage-cur" ng-init="vm.progress=vm.progress ? vm.progress : 0">
                <span class="num" ng-model="vm.progress">{{ vm.progress }}%</span>
              </div>
            </div>
           </li>
          </ul>

0 讨论(0)

遥遥无期

2021-01-24 05:14

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

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app>
  <div name="myForm" xng-controller="ExampleController">
    <div class="c-progress-box" style="border: none;">
      <div class="c-percentage-cur">
        <span class="c-num" ng-bind="workingHoursSelectedRange"></span>
      </div>
      <div class="c-progress-bar c-progress-bar-slider">

        <input class="c-progress-slider" type="range" min="4" max="12" ng-model="workingHoursSelectedRange">
        <div class="c-inner" ng-style="{width: workingHoursSelectedRange + '%' }"></div>
      </div>
    </div>
  </div>
</body>

0 讨论(0)