svg和css3实现环形渐变进度条的代码示例


当前第2页 返回上一页

代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

</head>

<body>

  <div>

    <svg width="340" height="340" xmlns="http://www.w3.org/2000/svg">

      <circle r="150" cy="170" cx="170" stroke-width="10" stroke="#FAFAFA" fill="none" />

      <circle r="150" cy="170" cx="170" stroke-width="35" stroke="url(#linearGradient)" stroke-linejoin="round" stroke-linecap="round" fill="none"/>

      <circle fill="#FFFFFF" fill-rule="nonzero" cx="320" cy="170" r="12"></circle>

      <defs>

        <linearGradient x1="0%" y1="80.9878035%" x2="96.9769965%" y2="41.7547666%" id="linearGradient">

          <stop stop-color="#18A6FF" offset="0%"></stop>

          <stop stop-color="#32B7FF" offset="52.7095376%"></stop>

          <stop stop-color="#0094F1" offset="100%"></stop>

        </linearGradient>

      </defs>

    </svg>

    <div>

      <div>

        <span></span><span>%</span>

      </div>

    </div>

  </div>

  <script type="text/javascript">

    window.onload=function () {

      'use strict';

      var ProgressCircle = (function () {

        function ProgressCircle(percent,radius,elementClass){

         this._percent = percent;  //百分比

         this._radius = radius;    //圆的半径

         this._elementClass = elementClass; 

       }

 

       ProgressCircle.prototype.calcDashOffset = function () {

         var circumference;

           circumference = Math.PI * (2 * this._radius);   //计算圆圈的周长

           return Math.round(circumference - this._percent / 100 * circumference);  //计算圆圈要渲染的 长度!

         }

 

        //渲染进度条

        ProgressCircle.prototype.createCSS = function() {

          return $("." + this._elementClass + " .circle_bar").css('stroke-dashoffset', this.calcDashOffset());

        };

        //读取效果

        ProgressCircle.prototype.updateText = function () {

          $("." + this._elementClass + " .js-donut-figure")[0].innerText = this._percent;

        }

 

        ProgressCircle.prototype.init = function() {

          var _this = this;

          setTimeout(function(){

            _this.updateText();

            return _this.createCSS();

          },1000);

        };

        return ProgressCircle;

      })();

 

      let progress = new ProgressCircle(50, 150, 'donut');

      progress.init();

    }

  </script>

  <style type="text/css">

  *{

    padding:0;

    margin:0 

  }

  .donut{

    position: relative;

  }

  .circle_warp{

    position: relative;

    top: 0;

    left: 0

  }

  .circle_bar {

    stroke-dasharray: 942.4777960769379;  //计算整个圆周的周长公式为Circumstance=2*PI*Radius  2*3.14*半径(此时是半径是150)

    stroke-dashoffset: 942.4777960769379;

    transition: stroke-dashoffset 1200ms cubic-bezier(.99,.01,.62,.94);

  }

  .donut_svg{

    transform: rotate(-90deg);

  }

  .donut_copy{

    text-align: center;

    width: 340px;

    height: 340px;

    top: 40%;

    left: 0;

    position: absolute;

  }

  .donut_title{

    opacity: 0;

    font-size: 42px;

    color: #171717;

    margin-bottom: 2px;

    animation: donutTitleFadeLeft 800ms 200ms cubic-bezier(.99,.01,.22,.94) forwards;

    transform: translateX(0);

    font-weight: bold;

  }

  .donut_spic{

    content: "%";

    animation: donutTitleFadeRight 800ms 200ms cubic-bezier(.99,.01,.22,.94) forwards;

    opacity: 0;

    transform: translateY(-20px);

  }

  .donut__text p{

    font-size: 16px;

    color: #AAAAAA;

  }

  @keyframes donutTitleFadeLeft {

    from {

      opacity: 0;

      transform: translateX(0);

    }

 

    to {

      opacity: 1;

      transform: translateX(10px);

    }

  }

 

  @keyframes donutTitleFadeRight {

    from {

      opacity: 0;

      transform: translateX(-30px);

    }

    to {

      opacity: 1;

      transform: translateX(0);

    }

  }

</style>

</html>

以上就是svg和css3实现环形渐变进度条的代码示例的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

jsp和html的区别有哪些

分享html5实现弹出框的效果示例

html5游戏《坦克后援队》的示例代码分享

css背景怎么设置

c和javascript区别有哪些

html如何实现表单的选择框效果?单选框与多选框的实现(代码实例)

less和css的区别是什么

如何使用html5实现地理位置的获取

css 伪类有哪些

html的正式名称是

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...