开启掘金成长之旅！这是我参与「掘金日新计划 · 2更文挑战」的第8天点击查看活动详情

前言

今日摸鱼时刻看到一个学习英语的网站，感觉还不错，看到上方的进度条了，闲来无事就来动手画画看

条状进度条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="test">
    <div id="ui"></div>
</div>
</body>
</html>
<script>


</script>
<style>
    #test{
        margin-top: 100px;
        width: 500px;
        height: 20px;
        background-color: #ECECEC;
        border-radius: 20px;
        overflow: hidden;
    }
    #ui{
        width: 200px;
        height: 20px;
        background-color: #2bb6f0;
    }
</style>

原画如下:

条状的进度条是非常好实现的，只要改变内部的宽度就可以了。

圆形或饼状进度条

<template>
    <div class="circle">
        <div class="circle_left ab" :style="renderLeftRate(85)"></div>
        <div class="circle_right ab" :style="renderRightRate(85)"></div>
        <div class="circle_text">
            <span class="name">成功率</span>
            <span class="value">85%</span>
        </div>
    </div>
</template>

<script lang="ts">
    export default {
        name: 'CircleProgress',
        setup() {
            const renderRightRate = (rate: number) => {
                if (rate < 50) {
                    return 'transform: rotate(' + 3.6 * rate + 'deg);';
                } else {
                    return 'transform: rotate(0);border-color: #54c4fd;';
                }
            };

            const renderLeftRate = (rate: number) => {
                if (rate >= 50) {
                    return 'transform: rotate(' + 3.6 * (rate - 50) + 'deg);';
                }
            };
            return {
                renderLeftRate,
                renderRightRate,
            };
        },
    };
</script>

<style lang="scss">
  .circle {
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: 50%;
    left: 200px;
    top: 50px;
    box-shadow: inset 0 0 0 5px #54c4fd;

    .ab {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }

    &_left {
      border: 5px solid #546063;
      border-radius: 50%;
      clip: rect(0, 40px, 80px, 0);
    }

    &_right {
      border: 5px solid #546063;
      border-radius: 50%;
      clip: rect(0, 80px, 80px, 40px);
    }

    &_text {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
    }
  }
</style>

记多邻国画进度条

前言

条状进度条

圆形或饼状进度条