niapp純CSS實現圓形進度條組件。圓形進度條組件組合做一個步驟進度組件是非常常見。

純 CSS 實現圓形進度條組件有以下幾個好處：

輕量級：由于純 CSS 實現，無需額外的 JavaScript 或圖像資源，所以組件的文件大小相對較小，加載速度快，對頁面性能的影響較小。

兼容性好：CSS 是 Web 標準的一部分，幾乎所有現代瀏覽器都支持 CSS。因此，純 CSS 實現的圓形進度條組件在各種設備和瀏覽器上都能正常顯示和運行。

可定制性強：CSS 提供了豐富的樣式屬性和選擇器，可以靈活地自定義圓形進度條的樣式、顏色、大小、動畫效果等，以滿足不同項目和設計需求。

簡單易用：純 CSS 實現的圓形進度條組件通常使用簡單，只需要在 HTML 中添加相應的 CSS 類或樣式即可，無需復雜的配置或調用 JavaScript 函數。

性能優化：由于純 CSS 實現的圓形進度條不涉及 JavaScript 的計算和操作，可以減輕客戶端的計算負擔，提高頁面的響應速度和性能。

<template>

<view class="flex align-center diygw-col-24 justify-center">

<view class="progress-circle " :class="'progress-'+innerPercent" :style="{

'--not-progress-color':notProgressColor,

'--bg-color':bgColor,

'--color':color,

'--progress-color':progressColor,

'--width':$u.addUnit(width),

'--font-size':$u.addUnit(fontSize),

'--border-width':$u.addUnit(borderWidth)

}">

<view class="inner">

<view class="progress-number">{{innerPercent}}%</view>

</view>

</view>

</view>

</template>

<script>

export default {

props: {

width: {

type: Number,

default: 100

},

borderWidth: {

type: Number,

default: 20

},

bgColor: {

type: String,

default: '#fff'

},

notProgressColor: {

type: String,

default: '#ddd'

},

progressColor: {

type: String,

default: '#07c160'

},

color:{

type: String,

default: '#07c160'

},

fontSize:{

type: Number,

default: 24

},

/**

* 進度(0-100)

*/

percent: {

type: Number,

default: 0

},

/**

* 是否動畫

*/

animate: {

type: Boolean,

default: true

},

/**

* 動畫速率

*/

rate: {

type: Number,

default: 5

}

},

computed: {

/**

* @private

*/

complete() {

return this.innerPercent == 100

}

},

watch: {

percent(percent) {

this.setPercent()

}

},

data() {

return {

innerPercent: 0,

timeout: null

}

},

mounted() {

this.setPercent()

},

methods: {

setPercent() {

if (this.animate) {

this.stepTo(true)

} else {

this.innerPercent = this.percent

}

},

clearTimeout() {

clearTimeout(this.timeout)

Object.assign(this, {

timeout: null

})

},

stepTo(topFrame = false) {

if (topFrame) {

this.clearTimeout()

}

if (this.percent > this.innerPercent && !this.complete) {

this.innerPercent=this.innerPercent+1

}

if (this.percent < this.innerPercent && this.innerPercent > 0) {

this.innerPercent--

}

if (this.innerPercent !== this.percent) {

this.timeout = setTimeout(() => {

this.stepTo()

}, this.rate)

}

}

}

}

</script>

<style lang="scss" scoped>

.progress-circle {

--progress-color:#63B8FF;

--not-progress-color:#ddd;

--bg-color:#fff;

--width: 240rpx;

--border-width: 10rpx;

--color:#777;

--font-size:1.5rem;

$diythemeColor:var(--progress-color) ;

$diybackColor: var(--not-progress-color) ;

position: relative;

display: flex;

align-items: center;

justify-content: center;

width: var(--width);

height: var(--width);

border-radius: 50%;

transition: transform 1s;

background-color: $diybackColor;

padding:var(--border-width);

.inner{

width:100%;

height: 100%;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

z-index:1;

background-color: var(--bg-color);

}

&:before {

content: '';

left:0;

top:0;

position: absolute;

width: 100%;

height: 100%;

border-radius: 50%;

background-color: $diythemeColor;

}

$step: 1;

$loops: 99;

$increment: 3.6;

$half: 50;

@for $i from 0 through $loops {

&.progress-#{$i * $step}:before {

@if $i < $half {

$nextDeg: 90deg+($increment * $i);

background-image: linear-gradient(90deg, $diybackColor 50%, transparent 50%, transparent), linear-gradient($nextDeg, $diythemeColor 50%, $diybackColor 50%, $diybackColor);

}

@else {

$nextDeg: -90deg+($increment * ($i - $half));

background-image: linear-gradient($nextDeg, $diythemeColor 50%, transparent 50%, transparent), linear-gradient(270deg, $diythemeColor 50%, $diybackColor 50%, $diybackColor);

}

}

}

.progress-number {

width: 100%;

line-height: 1;

text-align: center;

font-size: var(--font-size);

color: var(--color);

}

}

</style>

紹：

騰訊游戲盒子是由騰訊自主研發的一款專為網頁游戲用戶定制的網頁游戲輔助工具，具有智能加速、防掉線、帳號多開、全屏等特點。

騰訊游戲盒子官網頁面也非常簡單明了，這也是目前很多簡單介紹型網站所采用的風格。頁面下半部分的圓形圖標使用了 CSS3 transform 旋轉屬性，當鼠標移動到上面時會順時針旋轉 20 度，但 IE6 – IE9 不支持該屬性，所以沒有效果。

演示地址：

https://www.361zy.com/demo/379/

下載地址：

https://cloud.06dn.com/s/qR9SW

解壓碼：

LSr69TPA

端大佬們，你們會怎么去實現呢？

用css畫出一個圓圈，里面有個叉號(不是字母x)，你會怎么實現？

哈嘍家人們，這是我今天去面試的一道筆試題。看到這個題目我第一時間想到的是用偽元素來實現，可握起筆我的手和腦子好像失聯了，不知道如何下筆，寫不出來！完蛋了，涼了！在這大環境下好不容易得來的面試機會，只能怪自己沒好好準備。

沒關系，還有面試！還有希望，先安慰一下自己，說不定背的八股文在面試的時候派上用場了！主打就是一個心態樂觀，面試重在參與！面試結束了，run回家了，死心了，真就是重在參與了。問的一個沒背，答得亂七八糟！

拜拜了家人們，今天也是陪跑的一天。