css实现8种不同风格圈圈加载动画效果代码-html代码-BFW代码库

css实现8种不同风格圈圈加载动画效果代码

代码语言：html

代码描述：css实现8种不同风格圈圈加载动画效果代码

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style>
        .spinner {
            width: 70px;
            height: 70px;
            border: 8px solid lightblue;
            border-top-color: blue ;
            border-radius: 50%;
            animation: spin 2s linear infinite;
        }
        
        .spinner>div{
            box-sizing: border-box;
            width: 100%;
            height: 100%;
        }
        
        .spinner-dual {
            width: 70px;
            height: 70px;
            border: 8px solid transparent;
            border-top-color: blue;
            border-bottom-color: blue;
            border-radius: 50%;
            animation: spin 1.5s linear infinite;  
        }
        
        .spinner-dual>div{
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            animation: spin .8s reverse linear infinite;
        }
        
        .spinner-fast {
            width: 70px;
            height: 70px;
            border-top: 5px solid blue;
            border-right: 5px solid transparent;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        .spinner-fast>div{
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            animation: spin 3s linear infinite;
        }
        
        .spinner-triple {
            width: 70px;
            height: 70px;
            border: 5px solid transparent;
            border-top-color: blue ;
            border-radius: 50%;
            animation: spin 2s linear infinite;
        }
        
        .spinner-triple::before {
            content: "";
            border: 5px solid transparent;
            border-top-color: lightskyblue ;
            border-radius: 50%;
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            animation: spin 2s linear infinite;
        }
        
        .spinner-triple::after {
            content: "";
            border: 5px solid transparent;
            border-top-color: lightblue;
            border-radius: 50%;
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;
            animation: spin 1s linear infinite;
        }
        
        .spinner-triple>div{
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            animati.........完整代码请登录后点击上方下载按钮下载查看