进度条

作者: _LG_ | 来源:发表于2019-12-03 18:30 被阅读0次
进度条 100
进度条 47
进度条 0
需要实现如图所示的进度条,其平均分成四个阶段:
  • 阶段1:0~25
  • 阶段2:25~50
  • 阶段3:50~75
  • 阶段4:75~100

要求

  • 显示每个阶段标题
  • 不同阶段不同的背景颜色,不同的形状

思路

  1. 分成两个大的div,一个div显示文案,另一个div显示进度
  2. 组合两个div,将两个div重叠

实现

1. 显示文案

  • html
<div className='process-text'>
    <div className='process-text--step'>阶段1</div>
    <div className='process-text--step'>阶段2</div>
    <div className='process-text--step'>阶段3</div>
    <div className='process-text--step'>阶段4</div>
</div>
  • css
.process-text {
    display: flex;

    &--step {
        width: 25%;
        height: 20px;
        border-radius: 100px 0 0 100px;
        position: relative;
        text-align: center;
        font-size: 11px;
        color: #4676aa;
        white-space: nowrap;
    }
}
  • 实现效果


2. 显示进度

  • html
<div className='process-show'>
    <div className={`process__text--step ${this.barLen>= 1 ? 'full' : ''}`}
        style={{ width: this.barLen == 1 ? `calc(${data} / 25 * (25% - 20px))` : '' }}></div>
    <div className={`process__text--step ${this.barLen>= 2 ? 'full' : ''}`}
        style={{ width: this.barLen == 2 ? `calc(${data - 25} / 25 * (25% - 30px))` : '' }} ></div>
    <div className={`process__text--step ${this.barLen>= 3 ? 'full' : ''}`}
        style={{ width: this.barLen == 3 ? `calc(${data - 25 * 2} / 25 * (25% - 30px))` : '' }}></div>
    <div className={`process__text--step ${this.barLen>= 4 ? 'full' : ''}`}
        style={{ width: this.barLen == 4 ? `calc(${data - 25 * 3} / 25 * (25% - 38px))` : '' }}></div>
</div>

this.barLen是用来判断其处于那一阶段,取值方式:this.barLen=Math.ceil(data/25)

  • css
.full {
    &::after {
        position: absolute;
        right: -20px;
        top: 0;
        content: "";
        border: 10px solid #cbe6ff;
        border-right: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-top: 10px solid transparent;
    }

    &:nth-child(1) {
        background: #cbe6ff;
    }

    &:nth-child(2) {
        background: #96ccff;
        left: 20px;

        &::before {
            border: 10px solid #96ccff;
        }

        &::after {
            border-color: #96ccff;
        }
    }

    // ...
    // 省略阶段3和阶段4的样式实现,和阶段1、2样式实现类似
}

实现效果(目前进度为47)

整合process-textprocess-show

.process {
    position: releative;

    &-text {
        position: absolute;
        z-index: 1;
    }

    &-show {
        position: absolute;
    }
}

最终效果

最终效果

总结

  • 运用伪类::before::after实现箭头形状
  • 运用z-index实现层叠效果

相关文章

  • sys模块

    打印进度条 进度条的效果 [# ][## ][### ...

  • 橡皮筋进度条ElasticProgressBar

    橡皮筋进度条ElasticProgressBar 橡皮筋进度条是一个极具动画效果的进度条。该进度条不仅具有皮筋效果...

  • Android SeekBar的使用,进度条的另一种实现方式

    概述: SeekBar是进度条。我们使用进度条时,可以使用系统默认的进度条;也可以自定义进度条的图片和滑块图片等。...

  • Android控件之SeekBar

    SeekBar是进度条。我们使用进度条时,可以使用系统默认的进度条;也可以自定义进度条的图片和滑块图片等。 See...

  • Android进度条

    Android进度条 不同的进度条显示结果: demo xml代码: 二.模拟进度条加载过程:运行展示图: xml...

  • SeekBar的用法

    1)ProgressBar (一般进度条,例如:下载进度条)2)SeekBar(拖动条,适用于音乐,视频播放进度条...

  • 设置进度条的样式

    1.首先是水平进度条 2.分别设置进度条的第一、第二进度条的样式和进度条背景的样式。新建一个文件progressb...

  • IOS开发 UISlider和UIProgressView

    进度条和滑动动条控件 本节学习内容: 1.进度条和滑动条的概念 2.进度条和滑动条的属性 3.进度条和滑动条的使用...

  • ProgressBar进度条

    SeekBar :搜寻进度条RatingBar:评价进度条 style="?android:attr/progre...

  • Android中常用UI控件ProgressBar

    ProgressBar表示进度条, 应用场景也很多,比如下载时候的进度条, 程序更新时候的进度条. 我们今天用昨天...

网友评论

      本文标题:进度条

      本文链接:https://www.haomeiwen.com/subject/dcfhgctx.html