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. android属性之excludeFromRecents -- clearTaskOnLaunch 隐身意图 启动activity

    这个可以  用android 任务中app 隐藏起来 android属性之clearTaskOnLaunch 此属性是 每次启动app时都会进入 根目录中      android:clearTask ...

  2. Activity启动清空原任务栈

    就是 启动新的activity  但是把之前所有的activity 都finish掉 而且所有的activity 都是在一个栈中 Intent intent = new Intent();intent ...

  3. lamp环境搭配（centos6.4）

    (一)如果你的服务器没有链接网络可以先挂载本地光盘.设置yum源. 挂载光盘: [root@delphi ~]# mkdir /mnt/cdrom #新建挂载点 [root@delphi ~]# mo ...

  4. jquery Mobile弹出窗

    先创建一个窗体 <div data-role="popup" id="popupView" class="ui-content" da ...

  5. 2、Linux系统root用户忘记密码的重置方式

    .界面按空格暂停,按E .找到UTF-,在后面空格后输入init=/bin/sh 然后CHRL+X启动 .进入到这个界面,输入mount -o remount,rw / .输入passwd..然后输入 ...

  6. apache2服务器mod_rewrite模块 开启方法[linux, ubuntu]

    在UBUNTU系统中要启用mod_rewrite的方法有两种: 第一种: 在终端中执行 sudo a2enmod rewrite 指 令后,即启用了 Mod_rewrite 模块, apache2服务 ...

  7. Binary Tree Inorder Traversal -- LeetCode 94

    Given a binary tree, return the inorder traversal of its nodes' values. For example:Given binary tre ...

  8. 初试微信小程序

    2016年11月3日,微信小程序终于公测了,大家可以正式开发了.早在这之前,应公司要求,和同事就早早的试了一下微信小程序的开发,特此记录一下: 微信官方小程序文档:https://mp.weixin. ...

  9. 简介C#读取XML的两种方式

    简介C#读取XML的两种方式 作者: 字体:[增加 减小] 类型:转载 时间:2013-03-03 在程序中访问进而操作XML文件一般有两种模型,分别是使用DOM(文档对象模型)和流模型,使用DOM的 ...

  10. 限制文本框只能输入数字或浮点数的JS脚步

    1.oninput,onpropertychange,onchange的用法 l          onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本 ...