javascript - 无法更改 jquery 进度条圆圈的数据百分比标记 (%) 大小

Question

我正在做一个需要循环进度条的元素。我想更改数据百分比 (%) 标记大小，我尝试使用 % 标记，但不起作用，我该如何更改它？我正在使用本教程 Jquery Progress bar

(function($) {
  $.fn.loading = function() {
    var DEFAULTS = {
      backgroundColor: '#b3cef6',
      progressColor: '#4b86db',
      percent: 75,
      duration: 2000
    };

    $(this).each(function() {
      var $target = $(this);

      var opts = {
        backgroundColor: $target.data('color') ? $target.data('color').split(',')[0] : DEFAULTS.backgroundColor,
        progressColor: $target.data('color') ? $target.data('color').split(',')[1] : DEFAULTS.progressColor,
        percent: $target.data('percent') ? $target.data('percent') : DEFAULTS.percent,
        duration: $target.data('duration') ? $target.data('duration') : DEFAULTS.duration
      };
      // console.log(opts);

      $target.append('<div class="background"></div><div class="rotate"></div><div class="left"></div><div class="right"></div><div class=""><span>' + opts.percent + '%</span></div>');

      $target.find('.background').css('background-color', opts.backgroundColor);
      $target.find('.left').css('background-color', opts.backgroundColor);
      $target.find('.rotate').css('background-color', opts.progressColor);
      $target.find('.right').css('background-color', opts.progressColor);

      var $rotate = $target.find('.rotate');
      setTimeout(function() {
        $rotate.css({
          'transition': 'transform ' + opts.duration + 'ms linear',
          'transform': 'rotate(' + opts.percent * 3.6 + 'deg)'
        });
      }, 1);

      if (opts.percent > 50) {
        var animationRight = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-end';
        var animationLeft = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-start';
        $target.find('.right').css({
          animation: animationRight,
          opacity: 1
        });
        $target.find('.left').css({
          animation: animationLeft,
          opacity: 0
        });
      }
    });
  }
})(jQuery);

 $(".progress-bar").loading()

.progress-bar {
  display: block;
  margin: 0 auto;
  text-align: center;
  height: 0px;
  width: 200px;
  font-size: 12px;
  font-family: sans-serif;
  line-height: 20px;
  color: #fff;
  margin-top: 55px;
  background-color: white;
}

.progress-bar div {
  position: absolute;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  text-align: center;
  margin-top: -52px;
  margin-left: -27px;
}

.progress-bar data-percen {
  font-size: 8px;
}

.progress-bar div span {
  position: absolute;
  font-family: sans-serif;
  font-size: 60px;
  line-height: 175px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 183px;
  width: 185px;
  left: 8.5px;
  top: 8.5px;
  text-align: center;
  border-radius: 50%;
  background-color: #f9f7f7;
  color: black;
}

.progress-bar .background {
  background-color: #b3cef6;
}

.progress-bar .rotate {
  clip: rect(0 100px 200px 0);
  background-color: #4b86db;
}

.progress-bar .left {
  clip: rect(0 100px 200px 0);
  opacity: 1;
  background-color: #b3cef6;
}

.progress-bar .right {
  clip: rect(0 100px 200px 0);
  transform: rotate(180deg);
  opacity: 0;
  background-color: #4b86db;
}

@keyframes toggle {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar" data-percent="48" data-duration="1000" data-color="#6a6f77,#5fb756">

</div>

Answer 1

span定位absolute并且是构成圆心的元素。

有第二个span对于百分号，
像这样:<span>' + opts.percent + '</span><span>%</span>是个不错的主意...
但是你必须稍微玩一下 CSS。

在下面的代码片段中，请注意我更改了 .progress-bar div span通过删除定义 font-size 的两行和 background-color .

那些现在必须应用到右边span .

所以我制定了两个新的 CSS 规则:.progress-bar div span:nth-of-type(1)和 .progress-bar div span:nth-of-type(2) .

第二个为您的百分号标识 CSS。

(function($) {
  $.fn.loading = function() {
    var DEFAULTS = {
      backgroundColor: '#b3cef6',
      progressColor: '#4b86db',
      percent: 75,
      duration: 2000
    };

    $(this).each(function() {
      var $target = $(this);

      var opts = {
        backgroundColor: $target.data('color') ? $target.data('color').split(',')[0] : DEFAULTS.backgroundColor,
        progressColor: $target.data('color') ? $target.data('color').split(',')[1] : DEFAULTS.progressColor,
        percent: $target.data('percent') ? $target.data('percent') : DEFAULTS.percent,
        duration: $target.data('duration') ? $target.data('duration') : DEFAULTS.duration
      };
      // console.log(opts);

      $target.append('<div class="background"></div><div class="rotate"></div><div class="left"></div><div class="right"></div><div class=""><span>' + opts.percent + '</span><span>%</span></div>');

      $target.find('.background').css('background-color', opts.backgroundColor);
      $target.find('.left').css('background-color', opts.backgroundColor);
      $target.find('.rotate').css('background-color', opts.progressColor);
      $target.find('.right').css('background-color', opts.progressColor);

      var $rotate = $target.find('.rotate');
      setTimeout(function() {
        $rotate.css({
          'transition': 'transform ' + opts.duration + 'ms linear',
          'transform': 'rotate(' + opts.percent * 3.6 + 'deg)'
        });
      }, 1);

      if (opts.percent > 50) {
        var animationRight = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-end';
        var animationLeft = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-start';
        $target.find('.right').css({
          animation: animationRight,
          opacity: 1
        });
        $target.find('.left').css({
          animation: animationLeft,
          opacity: 0
        });
      }
    });
  }
})(jQuery);

$(".progress-bar").loading()

.progress-bar {
  display: block;
  margin: 0 auto;
  text-align: center;
  height: 0px;
  width: 200px;
  font-size: 12px;
  font-family: sans-serif;
  line-height: 20px;
  color: #fff;
  margin-top: 55px;
  background-color: white;
}

.progress-bar div {
  position: absolute;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  text-align: center;
  margin-top: -52px;
  margin-left: -27px;
}

.progress-bar data-percen {
  font-size: 8px;
}

.progress-bar div span {
  position: absolute;
  font-family: sans-serif;
  /*font-size: 60px;*/
  line-height: 175px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 183px;
  width: 185px;
  left: 8.5px;
  top: 8.5px;
  text-align: center;
  border-radius: 50%;
  /*background-color: #f9f7f7;*/
  color: black;
}

.progress-bar div span:nth-of-type(1) {
  font-size: 60px;
  background-color: #f9f7f7;
}
.progress-bar div span:nth-of-type(2) {
  font-size: 12px;
  text-align:right;
  padding-right:4em;
}

.progress-bar .background {
  background-color: #b3cef6;
}

.progress-bar .rotate {
  clip: rect(0 100px 200px 0);
  background-color: #4b86db;
}

.progress-bar .left {
  clip: rect(0 100px 200px 0);
  opacity: 1;
  background-color: #b3cef6;
}

.progress-bar .right {
  clip: rect(0 100px 200px 0);
  transform: rotate(180deg);
  opacity: 0;
  background-color: #4b86db;
}

@keyframes toggle {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar" data-percent="48" data-duration="1000" data-color="#6a6f77,#5fb756">

</div>