整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
端html5的canvas技术现在经常运用到一些图形中，今天我们就来讲解下用canvas来实现一款网站中的进度条效果
canvas实现网站中粒子特效的进度条，效果图：
实现代码：
html:
js代码：
度条可以用来加载页面, 拉 Ajax 内容, 或者处理像文件上传这样的基本用户输入任务。新的 HTML5进度条使得在任何页面上添加这些功能变得非常容易。 但是为什么不重新设计一下呢？有了这些免费的插件, 你可以重新设计你的进度条来匹配任何网站的外观。 更不用说你可以添加到页面上的所有额外功能和自定义动画。
是一个超薄和轻量级的免费插件。它适用于任何现代的进度条元素, 它采取基本选项的总填充长度, 条色, 和高度 / 宽度(除其他功能)。你可以在你自己的网站上使用代码片段来查看一些示例。对于任何愿意使用 jQuery 的人来说, 这可能是最好的进度条插件。 这是一个简单的工作, 它将运行在所有主要的浏览器。
我真正喜欢的另一个简单的选择是 MProgress.js。 这是围绕谷歌的材料设计风格建立起来的, 所以你可能会注意到它非常类似于谷歌的一些加载栏。
它有四种不同类型的加载条和四种不同的动画风格。 它们都显示在主页上, 所以你可以看到哪个可能适合你的网站。
但是你也可以在 GitHub 回购中找到这些演示的 gif 动画, 以及安装说明。超级简单, 超轻量级。 你还能要求什么？
我们都看到过横跨网页顶部的进度条。 这些越来越普遍, 它们通常用于动态加载的页面。ProgressBar.js是一个免费的插件, 可以复制这个特性。 但它不仅仅依赖于页面顶部的栏杆。
您可以使用这个插件为任何自定义形状, 从圆圈到三角形和自定义的平行四边形。
如果你查看主页, 你会发现链接到通过 JSFiddle 托管的示例。 这里有很多内容, 这些是在你的页面上添加装载器的绝佳模板。
插件绝对是最简单的插件。 它主要用于跟踪输入字段上的数字, 但它可以用于任何类似的进度条。关于 GitHub 回购的更多信息显示了它的功能以及如何安装。我推荐这个更简单的起点, 非常基本的进步动画。 对于其他的插件, 请查看这里的其他插件。
在为这篇文章做研究之前, 我从来没有听说过μProgress。 然而, 它显然是网络上最好的进度条插件之一。这是一个专注于自定义动画的过时进度条。 它们都运行在计算机的 GPU 上, 这样可以释放其他页面元素的任务以更快的渲染。你可以阅读更多关于这个过程的信息, 并在文档中找到安装细节。 这是一个非常酷的项目, 有一个完整的插件 API 来添加自定义功能。
如果你正在寻找一个纯粹的 JavaScript 进度插件, 那么不要再寻找了。使用 nanobar.JS, 你可以得到一个超小的 JS 库, 它围绕着进度条动画。 当 gzipped 的时候, 整个东西测量在700字节以下, 所以它非常小。你可以在主页上找到一些嵌入在页面中的条形条的例子, 以及一个固定在全部浏览器宽度的顶部加载条。它只能运行在一个单一的函数调用上, 这使得非 js 程序员以及坚决反对使用 jQuery 的开发者来说是完美的。
大多数进度条都会填满一个百分比或者一个数字计数器。但是进步是不同的。 这个 jQuery 插件可以让用户在预定义的过程中通过不同的步骤来开发一个 breadcrumb 进度条。这个过程可能是在网站上注册一个新账户, 或者跟随电子商务流程。不管怎样, 这都是一个很好的插件, 可以将这种功能添加到你的网站中。 它是完全免费使用和有一些伟大的文档在 GitHub 回购。
Cprogress 是专门为圆形加载杆设计的。这些绝对不是常态, 尤其是在网站上。 但是你可以在不刷新页面的情况下为 ajax 提供动力的 widgets 提供了便利。它带有一些不同的外观和大量可选的功能, 例如自定义速度和数字限制。 您需要知道的所有信息都可以在主页或者主要的回购中找到, 还有一个下载链接。
这里有一个非常相似的插件, 也建立在 jQuery 库上。但是使用 jQuery Circle Progress 插件, 你可以获得更多的选择。 有更多的自定义主题和更多的选项可供选择。缺点是什么？ 它可以再重一点, 所以它不是每个项目的最佳解决方案。
目前在 v1.2.2中, 这是一个稳定的插件, 值得在生产网站上使用。 这取决于你是否需要一个设计成圆圈的进度条！
不管你需要什么, 我保证其中的一个插件可以帮助你节省时间和挫败感, 避免从头开始编写进度条。
天我们想向大家展示如何创建一些具有特殊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一起使用），因此请确保设置并了解其基础知识：
如果你想对动画进度条使用完整的解决方案，那么你应该查看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
声明：文章著作权归作者所有，如有侵权，请联系小编删除。
*请认真填写需求信息，我们会在24小时内与您取得联系。
