环形对号加载动画收集

1. 环形向内填充带进度，打对号带进度

<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
    <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
    <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
</svg>

/* 定义svg */
.checkmark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    stroke-width: 2;
    stroke: #fff;
    box-shadow: inset 0px 0px 0px #7ac142; 
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__circle {
    stroke-dasharray: 157;
    stroke-dashoffset: 157;
    stroke: #7ac142;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 34;
    stroke-dashoffset: 34;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes scale {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}
@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #7ac142;
    }
}

2. 逆时针圆形带进度，打对号带进度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tick</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <input type="checkbox">
    <svg width="400" height="400">
        <circle fill="none" stroke="#68E534" stroke-width="20" cx="200" cy="200" r="190"  stroke-linecap="round" class="circle" transform="rotate(-90 200 200)"/>
        <polyline fill="none" stroke="#68E534" stroke-width="24" points="88,214 173,284 304,138" stroke-linecap="round" stroke-linejoin="round" class="tick"/>
    </svg>
    <h2>Payment Success</h2>
</body>
</html>

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 100vh;
    flex-direction: column;

}
h2{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 36px;
    margin-top: 40px;
    color: #333;
    opacity: 0;
}
input[type="checkbox"]:checked ~ h2{    /*延迟1.2s,用0.6s播放名为title的动画，并且在动画播放完周停留在最后一格*/
    animation: .6s title ease-in-out;
    animation-delay: 1.2s;
    animation-fill-mode: forwards;
}
.circle{
    stroke-dasharray: 1194; /*圆的周长： 2*190*3.14*/
    stroke-dashoffset: 1194; 
 
}
input[type="checkbox"]:checked + svg .circle{
    animation: circle 1s ease-in-out;   /*当勾选checkbox时，用1s的时间播放名为circle的动画*/
    animation-fill-mode:forwards;
}
.tick{
    stroke-dasharray:350 ;
    stroke-dashoffset: 350;
}
input[type="checkbox"]:checked + svg .tick{
    animation: tick .8s ease-in-out;
    animation-fill-mode:forwards;
    animation-delay: .95s;
}

@keyframes circle{  /*逆时针显示*/
    from{
        stroke-dashoffset: 1194;
    }
    to{
        stroke-dashoffset:2388 ;    /*若为0，则顺时针*/
    }
}
@keyframes tick{
    from{
        stroke-dashoffset: 350;
    }
    to{
        stroke-dashoffset: 0;
    }
}

@keyframes title{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

3. 环形变色(非渐变)，点击打对号带进度，dom实现

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>环形进度</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <!-- 加载loadding时才能旋转，方便后续控制 -->
        <div class="loader loadding"></div>
    </div>
    <script>
        // 获得loader对象
        let loader = document.querySelector('.loader');

        // 页面增加事件监听，点击时停止旋转
        document.body.addEventListener('click',()=>{
            // 移除loadding样式停止旋转
            loader.classList.remove('loadding');
            // 增加check样式让对号显示
            loader.classList.add('check');
        });

    </script>
</body>
</html>

:root {
    --background-color: #2c3e50;
    --border-color: #7591AD;
    --text-color: #34495e;
    --color1: #EC3E27;
    --color2: #fd79a8;
    --color3: #0984e3;
    --color4: #00b894;
    --color5: #fdcb6e;
    --color6: #e056fd;
    --color7: #F97F51;
    --color8: #BDC581;
}
* {
    margin: 0;
    padding: 0;
}
html {
    font-size: 14px;
}
body {
    width: 100vw;
    height: 100vh;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei';
}
.channel {
    position: absolute;
    width: 80%;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -200px);
    font-size: 30px;
    font-weight: bold;
    color: #fff;
}

.loader {
    position: relative;
    width: 80px;
    height: 80px;
    /* background-color: lawngreen; */
    border-radius: 50%;
    border: 3px solid var(--color4);
    transition: 0.5s;
}

.loader.loadding {
    animation: animate_rotate 1s linear infinite both;
    border-color: #34495c;
    border-left-color: var(--color4);
}
/* 变色+旋转 */
@keyframes animate_rotate {
    0% {
        transform: rotate(0deg);
        border-left-color: var(--color1);
    }
    25% {
        border-left-color: var(--color2);
    }
    50% {
        border-left-color: var(--color3);
    }
    75% {
        border-left-color: var(--color4);
    }
    100% {
        transform: rotate(360deg);
        border-left-color: var(--color1);
    }
}
/* 开始做对号 */
.loader::before {
    position: absolute;
    content: '';
    top: 50%;
    left: 18px;
    border: 3px solid var(--color4);
    border-left-width: 0;
    border-bottom-width: 0;
    transform: scaleX(-1) rotate(135deg);
    transform-origin: left top;
    display: none;
}
.loader.check::before {
    display: block;
    animation: animate_check 1s linear 1 both;
}
@keyframes animate_check {
    0% {
        width: 0px;
        height: 0px;
    }
    33% {
        width: 20px;
        height: 0px;
    }
    100% {
        width: 20px;
        height: 40px;
    }
}

出处:

SVG动画开发实例三
 HTML+CSS打勾动画制作
 HTML&CSS制作加载完成对号动画效果

posted @ 2023-08-08 15:41 全玉阅读(46) 评论(0) 编辑收藏举报

刷新页面返回顶部

全玉金生

环形对号加载动画收集

公告