整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

Html、Css、JavaScript制作圆形进度条的代码及基础分析

.说明：

推荐指数：★★★★

通俗易懂，小白一看就会，高手请飘过。

学python也是需要懂一点Html、Css、JavaScript的基础知识的。

建议使用vscode编辑器。


2.效果图1


3.代码：保存为html，用浏览器打开即可。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>圆形百分比进度条效果</title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.bg{
			width: 200px;
			height: 200px;
			border-radius: 100%;
			background: #ccc;
			position: relative;
			margin: 20px auto;
		}
		.circle-right, .circle-left, .mask-right, .mask-left{
			width: 200px;
			height: 200px;
			border-radius: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		.circle-right, .circle-left{
			background: skyblue;
		}
		.mask-right, .mask-left{
			background: #ccc;
		}
		.circle-right, .mask-right{
			clip: rect(0,200px,200px,100px);
		}
		.circle-left, .mask-left{
			clip: rect(0,100px,200px,0);
		}
		.text{
			width: 160px;
			height: 160px;
			line-height: 160px;
			text-align: center;
			font-size: 34px;
			color: deepskyblue;
			border-radius: 100%;
			background: #fff;
			position: absolute;
			top: 20px;
			left: 20px;
		}
		</style>
	</head>
	<body>
		<div class="bg">
			<div class="circle-right"></div>
			<!--100%是显示百分数，动态显示由0~100-->
			<div class="text">100%</div> 

		</div>
		
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){				
				//获取百分比值
				var num = parseInt($('.text').html());
				
				//通过计时器来显示过渡的百分比进度
				var temp = 0;
				var timer = setInterval(function(){
					calculate(temp);
					//清除计时器结束该方法调用
					if(temp == num){
						clearInterval(timer);
					}
					temp++;
				},30)

				//改变页面显示百分比
				function calculate(value){
					//改变页面显示的值
					$('.text').html(value + '%');
					
					//清除上次调用该方法残留的效果
					$('.circle-left').remove();
					$('.mask-right').remove();
					
					//当百分比小于等于50
					if(value <= 50){
						var html = '';
						
						html += '<div class="mask-right" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
						
						//元素里添加子元素
						$('.circle-right').append(html);
					}else{
						value -= 50;
						var html = '';
						
						html += '<div class="circle-left">';
						html += '<div class="mask-left" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
						html += '</div>';
						
						//元素后添加元素
						$('.circle-right').after(html);
					}
				}
			})
		</script>
		
	</body>
</html>

4.拆分法：把一个含有css和js（JavaScript）的html，拆掉三个文件，一个叫cirbar1.html,另外的叫：cirbar1.css和cirbar1.js文件，放在同一个文件夹内。这是./的意思，也可以指定文件夹。

4.1 cirbar1.html的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>圆形百分比进度条效果v2</title>
		<!--如果是style type="text/css"这种直接在html中设置css，注意起始是*，不是点-->
		<!--style type="text/css"-->
		<link href="./cirbar1.css" rel="stylesheet" />
	</head>
	<body>
		<div class="bg">
			<div class="circle-right"></div>
			
			<div class="text">100%</div> 
		</div>
		<!--这个外部js文件=jquery.min.js，不能少，否则不能动了-->
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>
        <!--同样的，把写在html的js，新建一个cirbar1.js，复制下去，保存，这样子简洁很多-->
		<!--script type="text/javascript"-->
		<script src="./cirbar1.js"></script>
	</body>
</html>

4.2 cirbar1.css的代码：

		*{
			margin: 0;
			padding: 0;
		}
		.bg{
			width: 200px;
			height: 200px;
			border-radius: 100%;
			background: #ccc;
			position: relative;
			margin: 20px auto;
		}
		.circle-right, .circle-left, .mask-right, .mask-left{
			width: 200px;
			height: 200px;
			border-radius: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		.circle-right, .circle-left{
			background: skyblue;
		}
		.mask-right, .mask-left{
			background: #ccc;
		}
		.circle-right, .mask-right{
			clip: rect(0,200px,200px,100px);
		}
		.circle-left, .mask-left{
			clip: rect(0,100px,200px,0);
		}
		.text{
			width: 160px;
			height: 160px;
			line-height: 160px;
			text-align: center;
			font-size: 34px;
			color: deepskyblue;
			border-radius: 100%;
			background: #fff;
			position: absolute;
			top: 20px;
			left: 20px;
		}

4.3 cirbar1.js的代码：

			$(function(){				
				//获取百分比值
				var num = parseInt($('.text').html());
				
				//通过计时器来显示过渡的百分比进度
				var temp = 0;
				var timer = setInterval(function(){
					calculate(temp);
					//清除计时器结束该方法调用
					if(temp == num){
						clearInterval(timer);
					}
					temp++;
				},30)

				//改变页面显示百分比
				function calculate(value){
					//改变页面显示的值
					$('.text').html(value + '%');
					
					//清除上次调用该方法残留的效果
					$('.circle-left').remove();
					$('.mask-right').remove();
					
					//当百分比小于等于50
					if(value <= 50){
						var html = '';
						
						html += '<div class="mask-right" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
						
						//元素里添加子元素
						$('.circle-right').append(html);
					}else{
						value -= 50;
						var html = '';
						
						html += '<div class="circle-left">';
						html += '<div class="mask-left" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
						html += '</div>';
						
						//元素后添加元素
						$('.circle-right').after(html);
					}
				}
			})

==============================

再来一个，不用外部js文件的圆形进度条

顺带回顾一下相关知识。

==============================

5.效果图


6.三个文件，放在同一个文件夹中

6.1 cirbar.html代码：

<!--第1步---声明html5-->
<!DOCTYPE html> 

<!--第2步---html大框架-->
<html lang="en">

<!--第2-1步---head部分-->
<head>
    <!--第2-1-1步---meta部分：声明字符编码格式：utf-8-->
    <!--注意与python的第一行声明一样：# -*- coding: utf-8 -*-->
    <meta charset="utf-8" />
    <!--第2-1-2步---标题名称-->
    <title>圆形进度条v1</title>
    <!--注意：./代表同一个文件夹下，也就是css和js文件与本html文件放在同一个文件夹下-->
    <!--第2-1-3步---导入css文件-->
    <link href="./cirbar.css" rel="stylesheet" />
</head>

<!--第2-2步---body部分-->
<body>
    <!--第2-2-1步---定义画布部分，注意没有逗号隔开，大小设置-->
    <canvas class="canvas" id="canvas" width="400" height="400"></canvas>
    <!--第2-2-2步---导入js文件部分-->
    <script src="./cirbar.js"></script>

<!--注意收尾-->
</body>
<!--注意收尾-->
</html>

6.2 cirbar.css代码：

.canvas {
            /*画布的背景颜色设置为：黑色*/
            background:#303030;
            
        }

6.3 cirbar.js代码：

window.onload = function () {
            var canvas = document.getElementById('canvas'),  //获取canvas元素
                context = canvas.getContext('2d'),  //获取画图环境，指明为2d
                centerX = canvas.width / 2,   //Canvas中心点x轴坐标
                centerY = canvas.height / 2,  //Canvas中心点y轴坐标
                rad = Math.PI * 2 / 100, //将360度分成100份，那么每一份就是rad度
                speed = 0.1; //加载的快慢就靠它了
            //绘制红色外圈
            function blueCircle(n) {
                context.save();
                context.strokeStyle = "	#1E90FF"; //随百分数转动的外圈的颜色为蓝色
                context.lineWidth = 3; //设置线宽
                context.beginPath(); //路径开始
                //注意-为顺时针，+为逆时针
                //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
                //context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false); 
                context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false); 
                context.stroke(); //绘制
                context.closePath(); //路径结束
                context.restore();
            }
            //绘制白色外圈，初始的白色外圈
            function whiteCircle() {
                context.save();
                context.beginPath();
                // 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持一样
                //context.strokeStyle = "#F8F8FF";
                context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);
                context.stroke();
                context.closePath();
                context.restore();
            }
            //百分比文字绘制
            function text(n) {
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
                context.strokeStyle = "#7FFF00";//设置中间动态百分数的颜色
                context.font = "25px Arial"; //设置字体大小和字体
                context.textAlign = 'center';//字体水平居中
                context.textBaseline = 'middle';//字体垂直居中
                //绘制字体，并且指定位置
                context.strokeText(n.toFixed(0) + "%", centerX, centerY);
                context.stroke(); //执行绘制
                context.restore();
            }
            //循环获取
            (function drawFrame() {
                window.requestAnimationFrame(drawFrame, canvas);
                context.clearRect(0, 0, canvas.width, canvas.height);
                whiteCircle();
                text(speed);
                blueCircle(speed);
                if (speed < 100) {
                    //1可从后台获取值,也是从0~100，step为1，代表速度
                    speed += 1;
                }
            }());
        }

注意到6.3js文件与4.3js文件的区别了么？一个有：window.onload =，一个没有，且只有$和小括号，因为外部的就是文件定义了一部分功能。


天我们想向大家展示如何创建一些具有特殊3D外观的纯CSS进度条。不妨将本教程当作是一个高级的CSS练习，以更深入地了解更多有趣的3D属性和着色技术。仅使用CSS创建UI组件将训练你的创造性思维，并且在本教程中，我们将通过制作进度条并动画化来向大家展示一些如何创建更复杂形状的技巧。


注意：某些CSS属性仅在现代浏览器中受支持。IE仍然不支持transform-style：preserve-3d，这是一个用于创建嵌套3D结构的关键属性；所以进度条在IE浏览器中将是扁平/无效的。


浏览器支持：Chrome Firefox Internet Explorer Safari Opera



源码下载(http://www.html5tricks.com/jquery-css3-3d-progress-bar.html)


我们将在本教程中使用Sass（与Compass一起使用），因此请确保设置并了解其基础知识：


  • 安装Sass和Sass Basics
  • 安装Compass Stylesheet Authoring Framework和Compass CSS3


如果你想对动画进度条使用完整的解决方案，那么你应该查看Kimmo Brunfeldt的ProgressBar.js或HubSpot的PACE，以获得出色的页面加载进度条。


为了生成所有必要的前缀，你可以使用像Autoprefixer或用于Sublime Text的插件。


我们将使用许多有趣的CSS属性，如transform，perspective和box-shadow。我们还将大量使用SASS，以节省生成进度条的位置和外观所需的很多时间。通过使用相对大小（em，百分比），我们可以确保进度条的大小易于调整。


构建面


我们先从构建一个包含所有六个面的框开始。这个框将作为我们的主要容器，用来设置进度条的尺寸及其视点。我们还将使用一个包装器用于透视图，并且这个包装器的font-size属性将允许使用某些em单位魔法的帮助来扩展进度条。


为了确保所有的面都是我们3D空间的一部分，我们需要将transform-style: preserve-3d应用于框。


所以让我们从初始化一些颜色变量开始来编写样式吧：


$light-gray: #e0e0e0;

$magenta: #ec0071;

$white: #f5f5f5;


.perspective {

font-size: 5em; // sets the main scale size

perspective: 12em; // sets the perspective

perspective-origin: 50% 50%;

text-align: center;

}


.bar {

display: inline-block;

width: 1em;

height: 1em;

margin-top: 1em;

position: relative;

transform: rotateX(60deg); // sets the view point

transform-style: preserve-3d; // perspective for the children

}


现在，我们来看看这些面。如果我们想要能够毫无困难地重新调整我们的主框，里面包含的面必须得像液体一样具有流动行为以及具备绝对位置。


.bar {

// -> The SCSS written before

.bar-face {

display: inline-block;

width: 100%;

height: 100%;

position: absolute;

bottom: 0;

left: 0;

background-color: rgba($light-gray, .6); // just to see what is happening

}

}


写标记并且确保它是可以访问的：


<div class="perspective">

<div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">

<div class="bar-face"/>

<div class="bar-face"/>

<div class="bar-face"/>

<div class="bar-face"/>

<div class="bar-face"/>

<div class="bar-face"/>

</div>

</div>


如果你有兴趣了解更多有关可访问性的信息，这篇文章（由Gez Lemon撰写）帮助我了很多：‘Introduction to WAI ARIA’


设置面


这是非常重要的一部分。进度条的面必须准确定向，这样当我们开始添加百分比填充时，就不会陷入困境。


.bar {

// -> The SCSS from before

.bar-face {

// -> The SCSS from before

transform-origin: 50% 100%;

&.roof {

transform: translateZ(1em);

}

&.front {

transform: rotateX(-90deg);

}

&.right {

left: auto;

right: -.5em;

width: 1em;

transform: rotateX(-90deg) rotateY(90deg) translateX(.5em);

}

&.back {

transform: rotateX(-90deg) rotateY(0deg) translateZ(-1em);

}

&.left {

width: 1em;

transform: rotateX(-90deg)rotateY(-90deg) translateX(-.5em) translateZ(.5em);

}

}

}


<div class="perspective">

<div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">

<div class="bar-face roof"/>

<div class="bar-face front"/>

<div class="bar-face left"/>

<div class="bar-face right"/>

<div class="bar-face back"/>

<div class="bar-face floor"/>

</div>

</div>



好的，这是一个很棒的立方体，但是我们要为进度条创建一个矩形。如果你还记得的话，我们已经用一种液体化的方法构建了面，所以如果我们只是增加.bar类的width，那么这样就可以。在这个例子中，我们使用了4em的宽度。



构建百分比填充


百分比填充将包含在面内，并且，为了保持HTML代码的最小化，我们将使用伪类:before。这样生成的:before元素将显示相对于面宽度的百分比。


.bar {

// -> The SCSS from before

.bar-face {

// -> The SCSS from before

&.percentage:before {

content: '';

display: block;

position: absolute;

bottom: 0;

width: 0;

height: 100%;

margin: 0;

background-color: rgba($magenta, .8);

transition: width .6s ease-in-out;

}

}

}


<div class="perspective">

<div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">

<div class="bar-face roof percentage"/>

<div class="bar-face front percentage"/>

<div class="bar-face left"/>

<div class="bar-face right"/>

<div class="bar-face back percentage"/>

<div class="bar-face floor percentage"/>

</div>

</div>



现在我们需要编写百分比填充样式。手动编写一百个类将会非常繁琐，所以让我们写一些可靠的循环来从HTML中获取aria-valuenow属性的所有值。


.bar {

// -> The SCSS from before

.bar-face {

// -> The SCSS from before

}


@for $i from 0 to 101 {

&[aria-valuenow='#{$i}'] {

.percentage:before {

width: $i * 1%;

}

}

}

}


如果你想立竿见影地看到成果，那么只需将HTML中的aria-valuenow属性从0更改至100。


构建皮肤


为了构建皮肤，我们将使用Sass mixins。为了得到一个现实化的外观，我们将使用box-shadow属性。这个属性支持一个数组的值，并且这个数组将允许我们模拟照明。我们将在这个属性中包含地面阴影和面的采光。


@mixin build-skin($color, $name) {

&.#{$name} {

.floor {

box-shadow:

0 -0.2em 1em rgba(0,0,0,.15),

0 0.2em 0.1em -5px rgba(0,0,0,.3),

0 -0.75em 1.75em rgba($white,.6);

}

.left {

background-color: rgba($color, .5);

}

.percentage:before {

background-color: rgba($color, .5);

box-shadow: 0 1.6em 3em rgba($color,.25);

}


}

}

.bar {

// -> The SCSS from before

@include build-skin(#57caf4, 'cyan');

}


<div class="perspective">

<div class="bar cyan" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">

<div class="bar-face roof percentage"/>

<div class="bar-face front percentage"/>

<div class="bar-face left"/>

<div class="bar-face right"/>

<div class="bar-face back percentage"/>

<div class="bar-face floor percentage"/>

</div>

</div>



此外，我们需要一个照亮面的技巧。如果我们以正确的顺序输入面的DOM节点，我们将看到奇迹：


<div class="perspective">

<div class="bar cyan" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">

<div class="bar-face roof percentage"/>

<div class="bar-face back percentage"/>

<div class="bar-face floor percentage"/>

<div class="bar-face left"/>

<div class="bar-face right"/>

<div class="bar-face front percentage"/>

</div>

</div>



这里发生了什么？很简单：当浏览器渲染一个绝对元素时，默认情况下它会添加一个自动递增的z-index（如果我们不编辑此属性的话）。所以，如果我们通过先放置底部的面来改变渲染顺序，那么它的阴影就会覆盖在背面的所有面上。这就是我们实现现实化阴影的原理。


关于如何实现进度条就都在这里了！现在，请查看所有DEMO演示和源代码文件，然后开始构建皮肤来训练自己此技能吧。


感谢各位的阅读，希望本教程能对你有所帮助！


源自：www.codeceo.com/article/css3-sass-3d-progress-bar.html

声明：文章著作权归作者所有，如有侵权，请联系小编删除。

可思议的纯 CSS 滚动进度条效果

问题先行，如何使用 CSS 实现下述滚动条效果？



就是顶部蓝色的滚动进度条，随着页面的滚动进度而变化长短。

在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙地实现上述效果。

OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦啊。所以我一直在想，有没有可能只使用 CSS 完成这个效果呢？


分析需求

第一眼看到这个效果，感觉这个跟随滚动动画，仅靠 CSS 是不可能完成的，因为这里涉及了页面滚动距离的计算。

如果想只用 CSS 实现，只能另辟蹊径，使用一些讨巧的方法。

好，下面就借助一些奇技淫巧，使用 CSS 一步一步完成这个效果。分析一下难点：

  • 如何得知用户当前滚动页面的距离并且通知顶部进度条？

正常分析应该是这样的，但是这就陷入了传统的思维。进度条就只是进度条，接收页面滚动距离，改变宽度。如果页面滚动和进度条是一个整体呢？

实现需求

不卖关子了，下面我们运用线性渐变来实现这个功能。

假设我们的页面被包裹在 <body> 中，可以滚动的是整个 body，给它添加这样一个从左下到到右上角的线性渐变：

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-repeat: no-repeat;
}
复制代码

那么，我们可以得到一个这样的效果：


Wow，黄色块的颜色变化其实已经很能表达整体的进度了。其实到这里，聪明的同学应该已经知道下面该怎么做了。

我们运用一个伪元素，把多出来的部分遮住：

body::after {
    content: "";
    position: fixed;
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: -1;
}
复制代码

为了方便演示，我把上面白色底改成了黑色透明底，：

实际效果达成了这样：

眼尖的同学可能会发现，这样之后，滑到底的时候，进度条并没有到底：

究其原因，是因为 body 的线性渐变高度设置了整个 body 的大小，我们调整一下渐变的高度：

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-size: 100% calc(100% - 100vh + 5px);
    background-repeat: no-repeat;
}
复制代码

这里使用了 calc 进行了运算，减去了 100vh，也就是减去一个屏幕的高度，这样渐变刚好在滑动到底部的时候与右上角贴合。

而 + 5px 则是滚动进度条的高度，预留出 5px 的高度。再看看效果，完美：

至此，这个需求就完美实现啦，算是一个不错的小技巧，完整的 Demo：

CodePen Demo -- 使用线性渐变实现滚动进度条

别人写过的东西通常我都不会再写，这个技巧很早

以前就有看到，中午在业务中刚好用到这个技巧就写下了本文，没有去考证最先发明这个技巧的是谁。


在线咨询
上一篇：好程序员Java教程分享使用HttpClient抓取页面内容
下一篇：传统ISV进场，MolyApp的HTML5生意是让商户、明星商城快速构建线上营销和支付渠道

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 东宁县 始兴县 道里区 城阳区 齐河县 平顺县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服