【css】圆形加载动效

咸蛋超人l

已于 2023-03-22 15:08:22 修改

阅读量350

点赞数 1

分类专栏： Vue 笔记文章标签： css css3 前端

于 2023-03-22 14:39:07 首次发布

本文链接：https://blog.csdn.net/weixin_50636536/article/details/129709332

版权

Vue 同时被 2 个专栏收录

12 篇文章 1 订阅

订阅专栏

笔记

11 篇文章 0 订阅

订阅专栏

在这里插入图片描述

第一种

<template>
    <div class="circle_process">
        <div class="wrapper right">
            <div :class="[isMove?'circle right-circle':'circle']"></div>
        </div>
        <div class="wrapper left">
            <div :class="[isMove? 'circle left-circle':'circle']"></div>
        </div>
        <div class="round" v-if="isMove">
            <p>运行中</p>
        </div>
        <div class="round" v-else>
            <div class="arrow"></div>
            <p class="begin-text">开始</p>
        </div>

    </div>
</template>

<script setup>
import {ref} from 'vue'
const isMove = ref(false)
</script>

<style lang="scss" scoped>
.circle_process {
    position: relative;
    width: 100px;
    height: 102px;
    background: linear-gradient(to bottom, #D8D8D8, #FFFFFF);
    border:1px solid #D8D8D8;
    border-radius: 50%;
    margin-bottom: 20px;
    .round {
        position: absolute;
       	top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 75px;
        height: 75px;
        text-align: center;
        color: #637381;
        background: #f3f3f5;
        box-shadow: 0 0 7px 0 #c3c5c6;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        .arrow {
            width: 0px;
            height: 0px;
            border-radius: 4px;
            border:15px solid transparent;
            border-left-color:#0077FF;
            position: absolute;
            top: 0;
            bottom: 25px;
            left: 21px;
            right: 0;
            margin: auto;
        }
        .begin-text {
            position: absolute;
            bottom: 10px;
            left: 22px;
        }

    }
    .wrapper {
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;
        font-size:0;
        overflow: hidden;
    }
    .right {
        right: 0;
    }
    .left {
        left: 0;
    }
    .circle {
        width: 100px;
        height: 100px;
        border: 15px solid transparent;
        border-radius: 50%;
        position: absolute;
        top: 0;
        box-sizing: border-box;

    }
    .right-circle {
        border-top: 15px solid #0077FF;
        border-right: 15px solid #0077FF;
        right: 0;
        animation: circle_right 5s linear infinite;
    }
    .left-circle {
        border-bottom: 15px solid #0077FF;
        border-left:15px solid #0077FF;
        left: 0;

        animation: circle_left 5s linear infinite;

    }
}

@keyframes circle_right {
    0% {
        transform: rotate(-135deg);
    }
    50%,
    100% {
        transform: rotate(45deg);
    }
}
@keyframes circle_left {
    0%,
    50% {
        transform: rotate(-135deg);
    }

    100% {
        transform: rotate(45deg);
    }
}
</style>

第二种方案

<template>
    <div class="circle_process">
        <div class="wrapper right">
            <div :class="[isMove?'circle move-circle':'circle']"></div>
        </div>
        <div class="round" v-if="isMove">
            <p>运行中</p>
        </div>
        <div class="round" v-else>
            <div class="arrow"></div>
            <p class="begin-text">开始</p>
        </div>

    </div>
</template>

<script setup>
import {ref} from 'vue'
const isMove = ref(false)
</script>

<style lang="scss" scoped>
.circle_process {
    position: relative;
    width: 103px;
    height: 102px;
    background: linear-gradient(to bottom, #D8D8D8, #FFFFFF);
    border:1px solid #D8D8D8;
    border-radius: 50%;
    margin-bottom: 20px;
    .round {
        position: absolute;
       	top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 75px;
        height: 75px;
        text-align: center;
        color: #637381;
        background: #f3f3f5;
        box-shadow: 0 0 7px 0 #c3c5c6;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        .arrow {
            width: 0px;
            height: 0px;
            border-radius: 4px;
            border:15px solid transparent;
            border-left-color:#0077FF;
            position: absolute;
            top: 0;
            bottom: 25px;
            left: 21px;
            right: 0;
            margin: auto;
        }
        .begin-text {
            position: absolute;
            bottom: 10px;
            left: 22px;
        }

    }
    .wrapper {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        font-size:0;
        overflow: hidden;
    }
    .circle {
        width: 102px;
        height: 100px;
        border: 15px solid transparent;
        border-radius: 50%;
        position: absolute;
        top: 0;
        box-sizing: border-box;

    }
    .move-circle {
        border-top: 15px solid #0077FF;
        animation: circle_right 5s linear infinite;
    }
}
@keyframes circle_right {
    0%   { transform: rotate(0deg); }
    100% { transform:rotate(360deg); }
}


</style>