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. mod_cluster启用https协议的步骤

    1.生成SSL证书与私钥 Generate Private Key on the Server Running Apache + mod_ssl First, generate a private k ...

  2. java　异常

    异常简介 java中有Error和Exception Error:是程序无法处理的错误,表示运行应用程序中较严重问题.大多数错误与代码编写者执行操作无关,而表示运行时JVM出现的问题. Excepti ...

  3. BaiduMap Search List

    using AnfleCrawler.Common; using HtmlClient; using System; using System.Collections.Generic; using S ...

  4. android技巧（一）：如何方便知晓当前Activity？如何管理应用中的Activity？如何最佳的启动一个Activity？

    1.如何方便知晓当前Activity? 可以不看代码根据当前界面就知道界面所在Activity的写法: 建立BaseActivity,继承自Activity,在BaseActivity的OnCreat ...

  5. HANS123

    //策略:HANS123//周期:日内//类别:趋势突破 作为外汇市场上广为流行的一种突破交易策略,HANS123以其简洁的开盘后N根K线的高低点突破,作为交易信号触发的评判标准.这也是一种入场较早的 ...

  6. hibernate内部测试题（附赠答案）

    一.选择题(共25题,每题2.5分,选择一项或多项,漏选错选不得分) 1．在Hibernate中,以下关于主键生成器说法错误的是( ). A．increment可以用于类型为long.short或by ...

  7. skynet的协程

    之前对skynet的印象,主要是来自于我对golang的理解,对gevent开发的经验,以及云风的blog.对于底层的代码,并没有仔细去阅读过.最近在实现业务系统的时候,发现有同事在同一个函数里做了一 ...

  8. 如何让LinearLayout也有类似Button的点击效果？

    有的时候,我们希望LinearLayout布局也有点击的效果,这时候我们不仅需要一个作为背景的selector,还要设置一些其它属性才行: android:clickable="true&q ...

  9. CentOS进程管理

    Linux系统中的基本运行单位是进程,通过对系统系统中的进程的管理能够对系统的实时运行状态进行了解和调度.Linux中提供了用于查看.调整和停止进程的命令.本文仍然以RHEL6说明Linux系统的进程 ...

  10. HDU 1536 sg函数

    S-Nim Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...