专栏首页蚂蚁开源社区【前端小技巧】CSS3实现环形进度条

【前端小技巧】CSS3实现环形进度条

前端设计肯定会遇到进度条的问题,很多人直接使用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);   
  }   
}

作者 | 大神神码 | 蚂蚁开源社区大神,资深开发工程师

本文分享自微信公众号 - 蚂蚁开源社区(mayi_zzfriend)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vscode常用插件

    快捷键:ctrl+alt+i 顶部注释,可定义作者、时间等信息,保存文件时自动更新最后修改时间。

    botkenni
  • VSCode拓展推荐(前端开发)

    Text-to-speech function is limited to 200 characters

    botkenni
  • CSS和网络性能

    CSS对于呈现页面至关重要 - 在找到,下载和解析所有CSS之前,浏览器不会开始呈现 - 因此我们必须尽可能快地将其加载到用户的设备上。 关键路径上的任何延迟都...

    frontoldman
  • 基于JS实现回到页面顶部的五种写法(从实现到增强)

      使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回...

    botkenni
  • 如何在 IE6,7 下实现 white-space: pre-wrap;

    HTML 中的“空白符”包括空格 (space)、制表符 (tab)、换行符 (CR/LF) 三种。

    botkenni
  • CSS画出一个爱心的案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <titl...

    botkenni
  • 最全的CSS浏览器兼容整理

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就 会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对...

    botkenni
  • css-in-js 探讨

    Web开发是需要掌握多种技术。我们习惯于与多种语言密切合作。而且,随着开发Web应用程序变得越来越普遍和差别细微化,我们经常寻找创造性的方法来弥合这些语言之间的...

    frontoldman
  • 【小家Java】common-lang3中StringUtils的使用详解

    上一篇博文已经讲解了lang3下面的很多的API,但是StringUtils留在本文专门讲解。因为这个工具类在日常使用中实在太多了。

    BAT的乌托邦
  • pwa-之service worker 离线文件处理

    使用cache Api,预先缓存offline.html和offline.svg。当网络不通时,html请求走到cache方法里面去,然后响应的是缓存好的off...

    frontoldman

扫码关注云+社区

领取腾讯云代金券