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. IIS调试技巧

    VS2010如何调试IIS上的网站 通常,我们在Visual Studio里调试ASP.NET网站,都是加个断点,然后按F5,在VS自带的虚拟服务器下调试的.但有时候,VS自带的服务器弱爆了,无法满足 ...

  2. get请求乱码

    1.get请求不管用什么编码都是乱码, 2.由于http请求最先到达的是容器,所以先要检查容器的unrencodeing <Connector port="80" proto ...

  3. C++ STL算法系列2---find ，find_first_of ， find_if ， adjacent_find的使用

    一.find运算 假设有一个int型的vector对象,名为vec,我们想知道其中是否包含某个特定值. 解决这个问题最简单的方法时使用标准库提供的find运算: 1 // value we'll lo ...

  4. 例子：Background Agent Sample

    通过本例程学习: 后台代理Agent的使用方法 定期代理(PeriodicTask)来说,限制了: 有一些API不能使用,并不是说你不调用就可以了,只要你在同一个程序集里使用了这些API,就不会通过验 ...

  5. Unity3D和OGRE资源管理机制

    转自:http://www.tuicool.com/articles/QbMjUn 游戏中通常有大量资源,如网格.材质.纹理.动画.着色器程序和音乐等,游戏引擎作为做游戏的工具,自然要提供良好的资源管 ...

  6. IOS网络开发（三）

    1 飞机航班查询软件 1.1 问题 NSURLConnection是IOS提供的用于处理Http协议的网络请求的类,可以实现同步请求也可以实现异步请求,本案例使用NSURLConnection类实现一 ...

  7. Socket编程基础——面向连接TCP

    WinSock是Windows环境下的网络编程接口,它最初是基于Unix环境下的BSD Socket,是一个与网络协议无关的编程接口.WinSock包含两个主要版本,即WinSock1和WinSock ...

  8. Jena Fuseki 102

    Version Fuseki v1 Fuseki v2 since Jena 2.13.0 Both v1 and v2 are active and maintained.[2015/06/29] ...

  9. python中的if __name__ == '__main__' what hell is it?

    python中的if __name__ == '__main__' what hell is it? python认为一切模块都可能被执行或者被import 如果一个模块是被import导入的,那么该 ...

  10. Spring Autowired错误？？？

    @SpringBootApplicationpublic class TestMqApplication extends SpringBootServletInitializer { @Suppres ...