整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
端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小時內與您取得聯系。
