【CSS】静态螺纹进度条和静态流程布局

为了方便复用，在此记录一下！

效果如图所示

css核心代码：

.active{background-color:#fea6a2;background-image:repeating-linear-gradient(135deg, transparent 0, transparent 0.1rem, #FC786E 0.1rem, #FC786E 0.2rem);
}

流程布局如图所示：

颜色，图标，数量，进度条长度可根据自身业务需求变更

代码如下：

wxml：

<view class='headBox'><view class='head flex align-items-center justify-content-center'><view><image mode='widthFix' src="{{img_dir}}/mod/coupon/assets/cityjia_img/pindan.png"></image></view><view><image mode='widthFix' src="{{img_dir}}/mod/coupon/assets/cityjia_img/yaoqinghaoyou.png"></image></view><view><image mode='widthFix' src="{{img_dir}}/mod/coupon/assets/cityjia_img/zhongjiang2.png"></image></view></view><view class='progress-grey'></view><view class='head flex align-items-center justify-content-center font-size-10 color-black'><view><text>拼单</text></view><view><text>邀请好友</text></view><view><text>拼单成功</text></view></view><view class='progress'></view><view class='activeBox flex align-items-center justify-content-center'><view><view class='circle circle-active'></view></view><view style='padding-top:16rpx;'><view class='triangle'></view></view><view><view class='circle circle-grey'></view></view></view>
</view>

为了提高工作效率，上图中一些常用class，例如 flex align-items-center 等都是引用的，大家应该都能从这些class的名字中得到有效代码。这里的css中没有重复写出，如果用到，请将这些class根据其名称转化为有效的css代码

css：

.headBox {position: relative;background-color: white;
}
.head {width: 100%;padding: 5rpx 0;
}
.head image {width: 45rpx;
}
.head>view {width: 100%;display: flex;align-items: center;justify-content: center;
}
.progress-grey {width: 100%;height: 5rpx;background-color: #ddd;border-radius: 10rpx;margin:5rpx 0;
}
.progress {position: absolute;top: 57rpx;left: 0;width: 50%;height: 7rpx;background-color:#fea6a2;background-image:repeating-linear-gradient(135deg, transparent 0, transparent 0.1rem, #FC786E 0.1rem, #FC786E 0.2rem);border-radius: 20rpx;
}
.activeBox{width: 100%;height: 15rpx;position: absolute;top: 50rpx;left: 0rpx;
}
.activeBox>view{width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;
}
.circle{width: 12rpx;height: 12rpx;border-radius: 50%;
}
.circle-grey{background-color: #ddd;
}
.circle-active{background-color:#fea6a2;background-image:repeating-linear-gradient(135deg, transparent 0, transparent 0.1rem, #FC786E 0.1rem, #FC786E 0.2rem);
}
.triangle{border: 10rpx solid #FE7672;border-bottom: 10rpx solid transparent;border-left: 10rpx solid transparent;border-right: 10rpx solid transparent;
}

希望这些冗杂的布局代码能够节约你们宝贵的开发时间！

【CSS】静态螺纹进度条和静态流程布局相关推荐

CSS实现步骤进度条——前端每日一练
CSS实现步骤进度条效果展示 HTML布局文件 CSS样式 JavaScript操作逻辑补充:JavaScript的this关键字效果展示 HTML布局文件总体布局,一个大div盒子包裹所有内 ...
CSS实现圆环进度条
CSS实现圆环进度条一.静态进度条首先,我们先看一个静态进度条第一步当然是先实现一个最外层的父级圆环. 其次是通过 clip-path画出两个半圆,并绝对定位覆盖在父级圆环. 小于50的时候,我 ...
圆的css样式,圆形进度条css3样式
30% 以下样式100upx是50upx的2倍,这是尺寸比例 .con { position: relative; display: inline-block; height: 100upx; wid ...
css实现圆形进度条
css实现圆形进度条先来看一下效果图: 具体实现步骤: 先画一个大圆,底色为#ffffff; <div class="third"> </div> .th ...
前端圆形进度图_CSS3+JS实现静态圆形进度条
一.实现原理首先,我们来一个圆(黑色). 接着,再来两个半圆,将黑色的圆遮住.(为了演示,左右两侧颜色不一样) 这时候,我们顺时针旋转右侧蓝色的半圆,下面的黑色圆就会暴露出来,比如我们旋转45度(1 ...
CSS3+JS实现静态圆形进度条【清晰、易懂】
在写这篇文章之前,笔者查看了多篇博客,无奈前辈大多只是贴了代码,没有清晰明了的注释,所以容易让新人看得云里雾里.这里,笔者在弄明白原理后,对代码进行了优化,决定写(总结)一篇清晰.明了的圆形进度条的实 ...
如何在HTML中设计步骤进度条,使用纯CSS制作步骤进度条
步骤进度条的使用场景很多,比如说购物流程 .订单流程.面试流程等都要用到它.网上常见的做法是使用CSS图片精灵,该做法的优点是兼容性强,但缺点也很明显:难以自适应设备,而且会加载额外的图片资源.有没 ...
css实现横向进度条和竖向进度条
一.横向进度条 <html> <head> <title>横向进度条</title> <style type="text/css&quo ...
css实现圆形进度条加载动画
这里我会把遇到这个需求时的实现过程和遇到的问题记录下来,如果只是要看最终实现结果可直接滑到底部看实现代码. 我们经常可以看到网上有一些圆形进度条跟随数字的变化慢慢变成一个圆,这个动画实际上可以通过纯c ...

【CSS】静态螺纹进度条和静态流程布局

【CSS】静态螺纹进度条和静态流程布局相关推荐

最新文章

热门文章