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. CentOS6.4安装Hadoop2.0.5 alpha - Single Node Cluster

    1.安装JDK7 rpm到/usr/java/jdk1.7.0_40,并建立软链接/usr/java/default到/usr/java/jdk1.7.0_40 [root@server-308 ~] ...

  2. c#新手之1-如何组织类及相互调用

    不知道这个文章的名字起的对不对,姑且这么叫吧.我在这之前用c语言写程序几乎很少用函数调用来解决问题,都是用全局变量然后面向过程对数据做简单的处理,这就造成了我在学习c@之后仍有这个毛病,好点的时候有个 ...

  3. 如何编译spring源码，并导入到eclipse中

    wsc@WSC-PC /d/wsc/study-spring-source$ git clone https://github.com/spring-projects/spring-framework ...

  4. Libgdx 开发指南(1.2) 应用框架——模块概览

    模块概览 引言 LibGDX由一些为一个典型游戏架构中的各个步骤提供服务的模块组成. Input:为所有平台提供一致的输入模型与处理器.支持键盘.触屏.加速度传感器与鼠标. Graphics:使用硬件 ...

  5. reverse-XNUCA-babyfuscator

    上一次线上赛的一道题目 链接:http://pan.baidu.com/s/1qY9ztKC 密码:xlr2 这是一道代码混淆的题目,因为当时还不知道angr这样一个软件,所以我就用了自己的一种思路 ...

  6. fastcoloredtextbox控件 看下是否解决了中文

    该控件解决中文网址     未测试是否解决   想保存 http://www.dullong.com/share-a-code-can-be-highlighted-components-fastco ...

  7. tensorflow1

    特征: 1 灵活 2 可移植性 3 和研究/生产联系 4 自动求导 5 语言选择:python,严谨的c++接口:未来扩展更多 6 最大性能化

  8. TYVJ 1074 武士风度的牛

    easy BFS 注意输入是反的就OK了 #include <cstdio> #include <iostream> #include <queue> using ...

  9. 7个你可能不认识的CSS单位:rem vh vw vmin vmax ex ch

    rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.炒个栗子,如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于 ...

  10. 【NOIP2005】过河

    感觉这题好玄--最后看了chty的代码才过,我现在这样必须看题解才能A题怎么办嘛qaq 原题: 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上 ...