【前端小技巧】CSS3實現環形進度條

  • 2019 年 10 月 4 日
  • 筆記

前端設計肯定會遇到進度條的問題，很多人直接使用js插件，需要引入js文件，增加頁面承載量，容易引起衝突。

實現起來很簡單，只需要簡單的HTML5和CSS3程式碼即可。

效果圖：

html程式碼： 

<div class="rect-box">    <div class="rect left">       <div class="circle"></div>    </div>    <div class="rect right">       <div class="circle"></div>    </div>  </div>

css程式碼：

.rect-box{    width: 200px;    height: 200px;    /*border: 1px solid #ccc;*/    box-sizing: border-box;    position: relative;  }  .rect{    width: 100px;    height: 200px;    box-sizing: border-box;    position: absolute;    overflow:hidden;    top: 0;  }  .left{    left: 0;  }  .right{    right: 0;  }  .rect > div{    width: 200px;    height: 200px;    border:20px solid transparent;    border-radius: 50%;    box-sizing: border-box;    position: absolute;    top:0;    z-index: 3;    transform: rotate(45deg);  }  .right .circle{    border-top:20px solid #666;    border-right:20px solid #666;    border-left:20px solid rgb(81, 197, 81);    border-bottom:20px solid rgb(81, 197, 81);    right:0;    -webkit-animation: right 5s linear infinite;  }  .left .circle{     border-bottom:20px solid #666;     border-left:20px solid #666;     left:0;    -webkit-animation: left 5s linear infinite;  }  @-webkit-keyframes right{    0%{      border-left:20px solid rgb(182, 239, 182);      border-bottom:20px solid rgb(182, 239, 182);      -webkit-transform: rotate(45deg);    }    50%{        border-left:20px solid rgb(81, 197, 81);      border-bottom:20px solid rgb(81, 197, 81);      -webkit-transform: rotate(225deg);    }    100%{      border-left:20px solid green;      border-bottom:20px solid green;      -webkit-transform: rotate(225deg);    }  }  @-webkit-keyframes left{    0%{      border-top:20px solid rgb(81, 197, 81);      border-right:20px solid rgb(81, 197, 81);      -webkit-transform: rotate(45deg);    }    50%{        border-top:20px solid rgb(81, 197, 81);      border-right:20px solid rgb(81, 197, 81);      -webkit-transform: rotate(45deg);    }    100%{      border-top:20px solid green;      border-right:20px solid green;      -webkit-transform: rotate(225deg);    }  }

作者 | 大神神碼 | 螞蟻開源社區大神，資深開發工程師

Tags:

VirMach 便宜 VPS