css实现6种loading加载动画效果代码-html代码-BFW代码库

css实现6种loading加载动画效果代码

代码语言：html

代码描述：css实现6种loading加载动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  


  
  
<style>
.loader {
        --color: white;
        --size-mid: 6vmin;
        --size-dot: 1.5vmin;
        --size-bar: 0.4vmin;
        --size-square: 3vmin;
        
        display: block;
        position: relative;
        width: 50%;
        display: grid;
        place-items: center;
}

.loader::before,
.loader::after {
        content: '';
        box-sizing: border-box;
        position: absolute;
}

/**
        loader --1
**/
.loader.--1::before {
        width: var(--size-mid);
        height: var(--size-mid);
        border: 4px solid var(--color);
        border-top-color: transparent;
        border-radius: 50%;
        -webkit-animation: loader-1 1s linear infinite;
                animation: loader-1 1s linear infinite;
}

.loader.--1::after {
        width: calc(var(--size-mid) - 2px);
        height: calc(var(--size-mid) - 2px);
        border: 2px solid transparent;
        border-top-color: var(--color);
        border-radius: 50%;
        animation: loader-1 0.6s linear reverse infinite;
}

@-webkit-keyframes loader-1 {
        100% {
                transform: rotate(1turn);
        }
}

@keyframes loader-1 {
        100% {
                transform: rotate(1turn);
        }
}

/**
        loader --2
**/
.loader.--2::before,
.loader.--2::after {
        width: var(--size-dot);
        height: var(--size-dot);
        background-color: var(--color);
        border-radius: 50%;
        opacity: 0;
        -webkit-animation: loader-2 0.8s cubic-bezier(0.2, 0.32, 0, 0.87) infinite;
                animation: loader-2 0.8s cubic-bezier(0.2, 0.32, 0, 0.87) infinite;
}

.loader.--2::after {
        -webkit-animation-delay: 0.3s;
                animation-delay: 0.3s;
}

@-webkit-keyframes loader-2 {
        0%, 80%, 100% {
                opacity: 0;
        }
        
        33% {
                opacity: 1;
        }
        
        0%, 100% {
                transform: translateX(-4vmin);
        }
        
        90% {
                transform: translateX(4vmin);
        }
}

@keyframes loader-2 {
        0%, 80%, 100% {
                opacity: 0;
        }
        
        33% {
                opacity: 1;
        }
        
        0%, 100% {
                transform: translateX(-4vmin);
        }
        
        90% {
                transform: translateX(4vmin);
        }
}

/**
        loader --3
**/
.loader.--3::before,
.loader.--3::after {
        width: var(--size-dot);
        height: var(--size-dot);
        background-color: var(--color);
        border-radius: 50%;
        -webkit-animation: loader-3 1.2s ease-in-out infinite;
                animation: loader-3 1.2s ease-in-out infinite;
}

.loader.--3::before {
        left: calc(50% - 1.6vmin - var(--size-dot));
}

.loader.--3::after {
        left: calc(50% + 1.6vmin);
        -webkit-animation-delay: -0.4s;
                animation-delay: -0.4s;
}

@-webkit-keyframes loader-3 {
        0%, 100% {
                transform: translateY(-2.6vmin);
        }
        
        44% {
                transform: translateY(2.6vmin);
        }
}

@keyframes loader-3 {
        0%, 100% {
                transform: translateY(-2.6vmin);
        }
        
        44% {
                transform: translateY(2.6vmin);
        }
}

/**
        loader --4
**/
.loader.--4::before {
        height: var(--size-bar);
        width: 6vmin;
        background-color: var(--color);
        -webkit-animation: loader-4 0.8s cubic-bezier(0, 0, 0.03, 0.9) infinite;
                animation: loader-4 0.8s cubic-bezier(0, 0, 0.03, 0.9) infinite;
}

@-webkit-keyframes loader-4 {
        0%, 44%, 88.1%, 100% {
                transform-origin: left;
        }
        
        0%, 100%, 88% {
                transform: scaleX(0);
        }
        
        44.1%, 88% {
                transform-origin: right;
        }
        
        33%, 44% {
                transform: scaleX(1);
        }
}

@keyframes loader-4 {
        0%, 44%, 88.1%, 100% {
                transform-origin: left;
        }
        
        0%, 100%, 88% {
                transform: scaleX(0);
        }
        
        44.1%, 88% {
                transform-origin: right;
        }
        
        33%, 44% {
                transform: scaleX(1);
        }
}

/**
        loader --5
**/
.loader.--5::before,
.loader.--5::after {
        height: 3vmin;
        width: var(--size-bar);
        background-color: var(--color);
        -webkit-animation: loa.........完整代码请登录后点击上方下载按钮下载查看