欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何通過HTML/CSS 實現(xiàn)各類進度條的功能

  發(fā)布時間：2024-09-19 15:05:31   作者：SwJieJie   我要評論
本文詳細介紹了如何利用HTML和CSS實現(xiàn)多種風(fēng)格的進度條,包括基礎(chǔ)的水平進度條、環(huán)形進度條以及球形進度條等,還探討了如何通過動畫增強視覺效果,內(nèi)容涵蓋了使用HTML原生標(biāo)簽meter和progress,以及CSS的百分比、漸變等技術(shù)實現(xiàn)進度條的多種方法,

需求：我們在開發(fā)中會遇到使用各式各樣的進度條，因為當(dāng)前插件里面進度條各式各樣的，為了方便我們定制化的開發(fā)和方便修改樣式，我們這里使用HTML和CSS樣式來進行開發(fā)進度條功能。

通過本文學(xué)習(xí)我們會明白如何使用 HTML/CSS 創(chuàng)建各種基礎(chǔ)進度條及花式進度條及其動畫的方式。

  • 通過 HTML 標(biāo)簽 meter 創(chuàng)建進度條
  • 通過 HTML 標(biāo)簽progress創(chuàng)建進度條
  • HTML 實現(xiàn)進度條的局限性
  • 使用 CSS 百分比、漸變創(chuàng)建普通進度條及其動畫
  • 使用 CSS 創(chuàng)建圓環(huán)形進度條
  • 使用 CSS 創(chuàng)建球形進度條

1，橫向進度條效果如下

我們最為常見遇到進度條是橫向進度條。這個是最多的，主要利用HTML5 原生提供了兩個標(biāo)簽 和 來實現(xiàn)進度條。

meter 具體實例如下：

<p>
    <span>完成度：</span>
    <meter min="0" max="500" value="350">350 degrees</meter>
</p>

其中，min、max、value 分別表示最大值，最小值與當(dāng)前值。

我們再來看看 標(biāo)簽的用法：

<p>
    <label for="file">完成度：</label>
    <progress max="100" value="70"> 70% </progress>
</p>

其中，max 屬性描述這個 progress 元素所表示的任務(wù)一共需要完成多少工作量，value 屬性用來指定該進度條已完成的工作量。

二者比較差異如下：
那么問題來了，從上述 Demo 看，兩個標(biāo)簽的效果一模一樣，那么它們的區(qū)別是什么？為什么會有兩個看似一樣的標(biāo)簽?zāi)兀?br />這兩個元素最大的差異在于語義上的差別。
meter 表示已知范圍內(nèi)的標(biāo)量測量值或分?jǐn)?shù)值
progress 表示任務(wù)的完成進度
譬如，一個需求當(dāng)前的完成度，應(yīng)該使用 ，而如果要展示汽車儀表盤當(dāng)前的速度值，應(yīng)該使用 meter。

meter & progress 的局限性
當(dāng)然，在實際的業(yè)務(wù)需求中，或者生產(chǎn)環(huán)境，你幾乎是不會看到meter 和progress 標(biāo)簽。
我們無法有效的修改meter和 progress標(biāo)簽的樣式，譬如背景色，進度前景色等。并且，最為致命的是，瀏覽器默認(rèn)樣式的表現(xiàn)在不同瀏覽器之間并不一致。這給追求穩(wěn)定，UI 表現(xiàn)一致的業(yè)務(wù)來說，是災(zāi)難性的缺點！
我們無法給他添加一些動畫效果、交互效果，因為一些實際的應(yīng)用場景中，肯定不是簡單的展示一個進度條僅此而已
利用 CSS 實現(xiàn)進度條

因此，在現(xiàn)階段，更多的還是使用一些 CSS 的方式去實現(xiàn)進度條。

（1）使用百分比實現(xiàn)進度條
最為常見的一種方式是使用背景色配合百分比的方式制作帶有漸變的進度條。
最簡單的一個 DEMO示例如下：

<div class="g-container">
    <div class="g-progress"></div>
</div>
<div class="g-progress"></div>

同樣的，我們可以利用 HTML style 屬性填寫完整的 background 值傳遞實際百分比，當(dāng)然，這里更推薦使用 CSS 自定義屬性傳值
為了實現(xiàn)動畫效果，我們可以借助 CSS @property，改造下我們的代碼：

<div class="g-progress" style="--progress: 70%"></div>
@property --progress {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.g-progress {
    margin: auto;
    width: 240px;
    height: 25px;
    border-radius: 25px;
    background: linear-gradient(90deg, #0f0, #0ff var(--progress), transparent 0);
    border: 1px solid #eee;
    transition: .3s --progress;
}

2，圓形進度條效果如下：

核心就是使用角向漸變 background: conic-gradient()：
示例效果如下：

代碼如下：

<div class="progress-circle"
	v-for="(item,index) in progressList" :key="index"
      :style="{
        background: `radial-gradient(#fff 55%, transparent 56%), conic-gradient(#3A7CFF ${item.rate}%, #f5f5f5 ${ item.rate && item.rate > 0 ? item.rate + 0.4 : 0 }%),radial-gradient(#fff 60%, #F1F3FC 0%);`
      }
    ">
      <span class="progress-value" >{{item.name}}</span>
      <div class="totalvalbox" >
        {{ item.rate }}%
      </div>
 </div>
<style lang="scss" scoped>
    .progress-circle {
      position: relative;
      width: 149rpx;
      height: 149rpx;
      font-family: PingFang SC;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
	.progress-value {
	    position: absolute;
	    text-align: center;
	    line-height: 50rpx;
	    width: 100%;
	    font-weight: 400;
    	font-size: 26rpx;
     }
	.totalvalbox {
      min-width: 217rpx;
      text-align: center;
      position: absolute;
      bottom: -50rpx;
      font-weight: 400;
      font-size: 30rpx;
    }
</style>

優(yōu)化問題如下：

這里容易出現(xiàn)的問題如下：
角向漸變實現(xiàn)圓弧進度條的局限性
當(dāng)然，這個方法有兩個弊端。
當(dāng)然進度百分比不是類似于 0°、90°、180°、270°、360° 這類數(shù)字時，使用角向漸變時，不同顏色間的銜接處會有明顯的鋸齒。
看個例子 conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D)：

遇到此類問題的解決方案是，在銜接處，適當(dāng)留出一些漸變空間，我們簡單的改造一下上述角向漸變代碼：

{
  - background: conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D)`
  + background: conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27.2%, #B5838D)`
}

仔細看上面的代碼，將從 27% 到 27% 的一個變化，改為了 從 27% 到 27.2%，這多出來的 0.2% 就是為了消除鋸齒的，實際改變后的效果：

我們在有些情況會遇到進度條收尾用圓角的進度條，這種情況當(dāng)然進度條顏色是純色也是可以解決的，我們通過在在首尾處疊加兩個小圓圈即可實現(xiàn)這種效果。
如果進度條是漸變色的話，這種進度條則需要借助 SVG/Canvas 實現(xiàn)了

實例如下：

html

<div class="g-progress"></div>
<div class="g-container">
    <div class="g-progress"></div>
    <div class="g-circle"></div>
</div>

css

body, html {
    width: 100%;
    height: 100%;
    display: flex;
}
.g-container {
    position: relative;
    margin: auto;
    width: 200px;
    height: 200px;
}
.g-progress {
    position: relative;
    margin: auto;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(#FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D);
    mask: radial-gradient(transparent, transparent 80px, #000 80.5px, #000 0);
}
.g-circle {
    position: absolute;
    top: 0;
    left: 0;
    &::before,
    &::after {
        content: "";
        position: absolute;
        top: 90px;
        left: 90px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #FFCDB2;
        z-index: 1;
    }
    &::before {
        transform: translate(0, -90px);
    }
    &::after {
        transform: rotate(90deg) translate(0, -90px) ;
    }
}

基于此拓展，還可以實現(xiàn)多色的圓弧型進度條：（這個可能不像進度條，更類似于餅圖）

.g-progress {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    mask: radial-gradient(transparent, transparent 50%, #000 51%, #000 0);
    background: 
        conic-gradient(
            #FFCDB2 0, #FFCDB2 25%, 
            #B5838D 25%, #B5838D 50%, 
            #673ab7 50%, #673ab7 90%,
            #ff5722 90.2%, #ff5722 100%
        );
}

3，球形進度條效果如下

球形進度條也是比較常見的，類似于下面這種：

核心代碼如下：
控制一下球形容器表示進度 0% - 100% 時的波浪的高度即可。我們就能得到從 0% - 100% 的動畫效果

<div class="container">
    <div class="wave-change"></div>
    <div class="wave"></div>
</div>
.container {
    width: 200px;
    height: 200px;
    border: 5px solid rgb(118, 218, 255);
    border-radius: 50%;
    overflow: hidden;
}
.wave-change {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 0;
    top: 0;
    animation: change 12s infinite linear;
    &::before,
    &::after{
        content: "";
        position: absolute;
        width: 400px;
        height: 400px;
        top: 0;
        left: 50%;
        background-color: rgba(255, 255, 255, .6);
        border-radius: 45% 47% 43% 46%;
        transform: translate(-50%, -70%) rotate(0);
        animation: rotate 7s linear infinite;
        z-index: 1;
    }
    &::after {
        border-radius: 47% 42% 46% 44%;
        background-color: rgba(255, 255, 255, .8);
        transform: translate(-50%, -70%) rotate(0);
        animation: rotate 9s linear -4s infinite;
        z-index: 2;
    }
}
.wave {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: rgb(118, 218, 255);
    border-radius: 50%;
}
p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    color: #000;
    z-index: 10;
}
@keyframes rotate {
   to {
        transform: translate(-50%, -70%) rotate(360deg);
    }
}
@keyframes change {
    from {
        top: 80px;
    }
    to {
        top: -120px;
    }
}

4，炫酷的充電進度條如下

當(dāng)然，CSS 千變?nèi)f化，進度條的種類肯定也不僅僅局限于上述的幾類。譬如我們可以利用濾鏡實現(xiàn)的仿華為手機的充電動畫，也是一種進度條的呈現(xiàn)方式，也是能夠使用純 CSS 實現(xiàn)的：

核心代碼如下

<div class="g-container">
    <div class="g-number">98.7%</div>
    <div class="g-contrast">
        <div class="g-circle"></div>
        <ul class="g-bubbles">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
html,
body {
    width: 100%;
    height: 100%;
    display: flex;
    background: #000;
    overflow: hidden;
}
.g-number {
    position: absolute;
    width: 300px;
    top: 27%;
    text-align: center;
    font-size: 32px;
    z-index: 10;
    color: #fff;
}
.g-container {
    position: relative;
    width: 300px;
    height: 400px;
    margin: auto;
}
.g-contrast {
    filter: contrast(10) hue-rotate(0);
    width: 300px;
    height: 400px;
    background-color: #000;
    overflow: hidden;
    animation: hueRotate 10s infinite linear;
}
.g-circle {
    position: relative;
    width: 300px;
    height: 300px;
    box-sizing: border-box;
    filter: blur(8px);
    &::after {
        content: "";
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(0);
        width: 200px;
        height: 200px;
        background-color: #00ff6f;
        border-radius: 42% 38% 62% 49% / 45%;
        animation: rotate 10s infinite linear;
    }
    &::before {
        content: "";
        position: absolute;
        width: 176px;
        height: 176px;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background-color: #000;
        z-index: 10;
    }
}
.g-bubbles {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100px;
    height: 40px;
    transform: translate(-50%, 0);
    border-radius: 100px 100px 0 0;
    background-color: #00ff6f;
    filter: blur(5px);
}
li {
    position: absolute;
    border-radius: 50%;
    background: #00ff6f;
}
@for $i from 0 through 15 { 
    li:nth-child(#{$i}) {
        $width: 15 + random(15) + px;
        left: 15 + random(70) + px;
        top: 50%;
        transform: translate(-50%, -50%);
        width: $width;
        height: $width;
        animation: moveToTop #{random(6) + 3}s ease-in-out -#{random(5000)/1000}s infinite;
    }
}
@keyframes rotate {
    50% {
        border-radius: 45% / 42% 38% 58% 49%;
    }
    100% {
        transform: translate(-50%, -50%) rotate(720deg);
    }
}
@keyframes moveToTop {
    90% {
        opacity: 1;
    }
    100% {
        opacity: .1;
        transform: translate(-50%, -180px);
    }
}
@keyframes hueRotate {
    100% {
        filter: contrast(15) hue-rotate(360deg);
    }
}

5，拖拽與延伸

最后推薦幾款好高質(zhì)量更為酷炫的進度條

上述效果的完整實現(xiàn)可以戳 – 巧用 CSS 實現(xiàn)酷炫的充電動畫

效果來源于 CodePen – Bars By Lucagaz。

到此這篇關(guān)于如何通過HTML/CSS 實現(xiàn)各類進度條的功能。的文章就介紹到這了,更多相關(guān)html css進度條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • HTML+css制作簡易進度條

    進度條想必大家并不陌生吧，而且實現(xiàn)方法各種各樣，在本文為大家講解下利用html+css實現(xiàn)進度條的制作，感興趣的朋友可以嘗試操作下
    2013-09-30

  • 網(wǎng)頁加載進度條詳解（推薦）

    這篇文章主要介紹了網(wǎng)頁加載進度條，文中解釋了屬性和應(yīng)用，具體操作步驟大家可查看下文的詳細講解，感興趣的小伙伴們可以參考一下。
    2017-08-17

最新評論