CSS的优点在于的可以随意组合HTML元素来实现许多中效果，这儿我将使用CSS来实现一个运行进度条，效果如下：

思路是用两个div来作为进度条外观，表示进度的div和外面div宽度和高度保持一致，并是外面的div的overflow为hidden，这样就可以省去内部div超出的部分，然后通过控制内部div的margin-top属性来控制进度条的进度，这些可以在js中来实现。做法还算简单，下面是html和css文件内容：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8"/>

         <title>Css Demo</title>

         <link rel="stylesheet" href="style.css" />

         <script>

             function setProgressValue(id, val)

             {

                 var progress = document.getElementById(id);

                 var masker = progress.getElementsByClassName('progress_masker');

                 var value = progress.getElementsByClassName('progress_value');

                 if(masker.length>0)

                 {

                     masker[0].style.marginTop = "" + val + "%";

                 }

                 if(value.length>0)

                 {

                     value[0].innerHTML = "" + (100 - val) + "%";

                 }

             }

         </script>

     </head>

     <body onLoad="setProgressValue('progress', 20);">

         <div id="content">

             <div id="progress">

                 <div class="progress_value"></div>

                 <div class="progress_outer">

                        <div class="progress_inner">

                         <div class="progress_masker">

                         </div>

                     </div>

                 </div>

             <div>

         </div>

     </body>

 </html>
 #progress

 {

     width:200px;

     height:200px;

     padding:;

 }

 .progress_outer

 {

     height:100%;

     width:100%;

     background-color:gray;

     border-radius:calc(100%/2);

     border:5px solid black;

     padding:;

     box-shadow: 0px 2px 4px #555555;

     -webkit-box-shadow: 0px 2px 4px #555555;

     -moz-box-shadow: 0px 2px 4px #555555;

 }

 .progress_inner

 {

     height:100%;

     width:100%;

     border:1px solid yellow;

     border-radius:calc(100%/2);

     position:relative;

     background-color:white;

     overflow:hidden;

     text-align:center;

 }

 .progress_masker

 {

     height:100%;

     width:100%;

     background: -webkit-gradient(linear,center top,center bottom,from(#0ff), to(#0f0));

     background: -moz-linear-gradient( top,#fff,#0f0);

     background: -o-linear-gradient( top,#fff,#0f0)

 }

 .progress_value

 {

     width:100%;

     color:black;

     font-weight:bolder;

     background-color:transparent;

     text-align:center;

 }

因为在css中采用了相对布局，所以要更改进度条的大小只用更改最外层的div的宽度和高度，在这儿就是id为progress的div。

纯CSS实现圆形进度条的更多相关文章

  1. 简单实用的纯CSS百分比圆形进度条插件

    percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...

  2. 微信小程序纯css制作圆形进度条所遇到的问题

    wrapBox:最外层盒子,背景色为进度条的颜色 leftBox/rightBox:半宽等长 左/右浮动的盒子,背景色为灰色 roundMask:居中的盒子 用来遮盖leftBox和rightBox ...

  3. 超简单：纯CSS实现的进度条

    ——————纯CSS实现的进度条—————— HTML: <div class="wrapper"> <div class="bar"> ...

  4. 移动端纯CSS3制作圆形进度条所遇到的问题

    近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高 ...

  5. 一、纯css实现顶部进度条随滚动条滚动

    一.效果图 二.直接复制粘贴 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  6. 纯CSS3实现圆形进度条动画

    悄悄地,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.今天要介绍的这个 CSS3 进度条,效果和 Flyme OS 4 上的加载动画一样. 首先,来看下最终的效果: 它的 HTML ...

  7. 纯css实现顶部进度条随滚动条滚动

    <!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv=" ...

  8. css and canvas实现圆形进度条

    进度条效果:   话不多说,上代码 使用css动画实现,看到一篇博客的启发,稍微修改了下, css实现的原理是用两个半圆一开始隐藏,再分别旋转180度,最后成为一个整圆 半圆效果,一开始右边的半圆在盒 ...

  9. N 种仅仅使用 HTML/CSS 实现各类进度条的方式

    本文将介绍如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式,通过本文,你可能可以学会: 通过 HTML 标签 <meter> 创建进度条 通过 HTML 标签 &l ...

随机推荐

  1. imx6q uboot启动流程牛人的图片（转）

  2. input标签实现让光标不出现！

    实现不让光标出现的效果,很好用,例子如下: <input class="red" readonly unselectable="on" value=&qu ...

  3. 在你决定从事iOS开发前需要清楚的几个问题

    作者:David McGraw  翻译:丁丁(jackiehoo) 原文:http://www.xmcgraw.com/what-you-need-to-know-to-start-learning- ...

  4. Allegro建立引脚封装概念名词梳理

    首先感谢于博士的60讲的Cadence教学视频,老师讲的还是很有耐心,很细致,谢谢! 目前还只是看到建立PCB封装这一块,正好手头上有个案子在做,边做边学的进度还是要好很多.以前的工作对原理图这一块的 ...

  5. 诺基亚XL中Intent.ACTION_VIEW无效的问题

    今天测试播放视频的时候,发现在诺基亚XL机型里不能弹出视频应用列表. 我的代码是: Intent intent = new Intent(Intent.ACTION_VIEW); intent.set ...

  6. IIS32位，64位模式下切换

    一.32位模式 1.cscript %systemdrive%\inetpub\adminscripts\adsutil.vbs set w3svc/appPools/enable32bitappon ...

  7. iOS常用设计模式和机制之Block简单使用

    Block :block 实际上就是 Objective-C语言对闭包的实现 闭包(Closure):闭包就是一个函数,或者一个指向函数的指针,加上这个函数执行的非局部变量.闭包允许一个函数访问声明该 ...

  8. MMDrawerController 的使用

    1.AppDelegate .h 文件:#import "MMDrawerController .h" @property (strong, nonatomic) MMDrawer ...

  9. php部分---注册审核

    用户界面: 1.登录界面,用户填写相关信息 <form action="dengluchuli.php" method="post"> <di ...

  10. LVM逻辑卷管理

    一.LVM简介 LVM(Logic Volume Manager)逻辑卷管理,简单理解就是将一块或多块硬盘的分区在逻辑上集合,当一块大硬盘来使用. 其特点是: 1.可以实现在线动态扩展,也可以缩减 2 ...