热门推荐

    [CSS教程] CSS实现的圆形进度栏

    百宝网 Lv.7 显示全部楼层 发表于 2021-8-19 19:39:43

    实现效果



    202146160832582.png

    202146160832582.png


    实现代码


    html

    1. <div class="wrap">
    2.   
    3. <div class="progress-radial progress-25">
    4.   <div class="overlay">25%</div>
    5. </div>

    6. <div class="progress-radial progress-50">
    7.   <div class="overlay">50%</div>
    8. </div>

    9. <div class="progress-radial progress-75">
    10.   <div class="overlay">75%</div>
    11. </div>

    12. <div class="progress-radial progress-90">
    13.   <div class="overlay">90%</div>
    14. </div>
    15.   
    16. </div>
    复制代码

    css


    1. @import url(https://fonts.googleapis.com/css?family=Noto+Sans);
    2. body {
    3.   padding: 30px 0;
    4.   background-color: #2f3439;
    5.   font-family: "Noto Sans", sans-serif;
    6. }
    7. .wrap {
    8.   width: 600px;
    9.   margin: 0 auto;
    10. }
    11. /* -------------------------------------
    12. * Bar container
    13. * ------------------------------------- */
    14. .progress-radial {
    15.   float: left;
    16.   margin-right: 30px;
    17.   position: relative;
    18.   width: 100px;
    19.   height: 100px;
    20.   border-radius: 50%;
    21.   border: 2px solid #2f3439;
    22.   background-color: tomato;
    23. }
    24. /* -------------------------------------
    25. * Optional centered circle w/text
    26. * ------------------------------------- */
    27. .progress-radial .overlay {
    28.   position: absolute;
    29.   width: 60px;
    30.   height: 60px;
    31.   background-color: #fffde8;
    32.   border-radius: 50%;
    33.   margin-left: 20px;
    34.   margin-top: 20px;
    35.   text-align: center;
    36.   line-height: 60px;
    37.   font-size: 16px;
    38. }
    39. /* -------------------------------------
    40. * Mixin for progress-% class
    41. * ------------------------------------- */
    42. .progress-0 {
    43.   background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(90deg, #ff6347 50%, #2f3439 50%, #2f3439);
    44. }
    45. .progress-5 {
    46.   background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(108deg, #ff6347 50%, #2f3439 50%, #2f3439);
    47. }
    48. .progress-10 {
    49.   background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(126deg, #ff6347 50%, #2f3439 50%, #2f3439);
    50. }
    51. .progress-15 {
    52.   background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(144deg, #ff6347 50%, #2f3439 50%, #2f3439);
    53. }
    54. .progress-20 {
    55.   background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(162deg, #ff6347 50%, #2f3439 50%, #2f3439);
    56. }
    57. .progress-25 {
    58.   background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(180deg, #ff6347 50%, #2f3439 50%, #2f3439);
    59. }
    60. .progress-30 {
    61.   background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(198deg, #ff6347 50%, #2f3439 50%, #2f3439);
    62. }
    63. .progress-35 {
    64.   background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(216deg, #ff6347 50%, #2f3439 50%, #2f3439);
    65. }
    66. .progress-40 {
    67.   background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(234deg, #ff6347 50%, #2f3439 50%, #2f3439);
    68. }
    69. .progress-45 {
    70.   background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(252deg, #ff6347 50%, #2f3439 50%, #2f3439);
    71. }
    72. .progress-50 {
    73.   background-image: linear-gradient(-90deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
    74. }
    75. .progress-55 {
    76.   background-image: linear-gradient(-72deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
    77. }
    78. .progress-60 {
    79.   background-image: linear-gradient(-54deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
    80. }
    81. .progress-65 {
    82.   background-image: linear-gradient(-36deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
    83. }
    84. .progress-70 {
    85.   background-image: linear-gradient(-18deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
    86. }
    87. .progress-75 {
    88.   background-image: linear-gradient(0deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
    89. }
    90. .progress-80 {
    91.   background-image: linear-gradient(18deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
    92. }
    93. .progress-85 {
    94.   background-image: linear-gradient(36deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
    95. }
    96. .progress-90 {
    97.   background-image: linear-gradient(54deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
    98. }
    99. .progress-95 {
    100.   background-image: linear-gradient(72deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
    101. }
    102. .progress-100 {
    103.   background-image: linear-gradient(90deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
    104. }
    复制代码

    以上就是CSS实现的圆形进度栏的详细内容,更多关于CSS实现圆形进度栏的资料请关注百宝网其它相关文章!
    回复

    使用道具 举报

    发表回复

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

  • 返回顶部

  • 快速回复 返回顶部 返回列表