css实现小方块进度条

最新推荐文章于 2025-07-15 23:00:23 发布

原创最新推荐文章于 2025-07-15 23:00:23 发布 · 1.3k 阅读

13 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #前端 #java

收录于

结构

<view class="progress-bar-box">
		<view class="progress-bar"	:style="{ width: ((值1 / 值2 ) * 100).toFixed(2) + '%' }">
		</view>
		<view class="progress-bar-item">
				<view class="item" v-for="( item, index ) in  44 " :key="index"> </view>
		</view>
</view>

css

	.progress-bar-box {
			display: flex;
			position: relative;
			width: 451rpx;
			background-color: #135E5A;
			transform: skewX(-21deg);
			margin: 15rpx;


			.progress-bar {
				height: 16rpx;
				background-color: var(--color-dot);

			}

			.progress-bar-item {
				position: absolute;
				top: 0;
				left: 0;
				display: flex;

			}

			.item {
				height: 16rpx;
				width: 3rpx;
				background-color: #0a050c;
				margin-left: 8rpx;

			}

		}