圆形进度

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #startmengban {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
             100%;
            height: 100%;
            z-index: 999;
            background: rgba(0, 0, 0, 0.7);
            display: table;
        }

        #startmengban .center {
            display: table-cell;
            vertical-align: middle;
        }

        #startmengban h2 {
            text-align: center;
            color: #fff;
            font-size: 20px;
            font-weight: normal;
            margin: 0;
            margin-top: 35px;
        }

        .spinner {
            margin: 0px auto;
             55px;
            height: 55px;
            position: relative;
        }

        .container1 > div,
        .container2 > div,
        .container3 > div {
             15px;
            height: 15px;
            background-color: #fff;
            border-radius: 100%;
            position: absolute;
            -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
            animation: bouncedelay 1.2s infinite ease-in-out;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }

        .spinner .spinner-container {
            position: absolute;
             100%;
            height: 100%;
        }

        .container2 {
            -webkit-transform: rotateZ(45deg);
            transform: rotateZ(45deg);
        }
        .container2{
            transform: rotateZ(45deg);
        }
        .container3 {
            -webkit-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
        }

        .circle1 {
            top: 0;
            left: 0;
        }

        .circle2 {
            top: 0;
            right: 0;
        }

        .circle3 {
            right: 0;
            bottom: 0;
        }

        .circle4 {
            left: 0;
            bottom: 0;
        }

        .container2 .circle1 {
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
        }

        .container3 .circle1 {
            -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
        }

        .container1 .circle2 {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }

        .container2 .circle2 {
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
        }

        .container3 .circle2 {            -webkit-animation-delay: -0.7s;            animation-delay: -0.7s;        }        .container1 .circle3 {            -webkit-animation-delay: -0.6s;            animation-delay: -0.6s;        }        .container2 .circle3 {            -webkit-animation-delay: -0.5s;            animation-delay: -0.5s;        }        .container3 .circle3 {            -webkit-animation-delay: -0.4s;            animation-delay: -0.4s;        }        .container1 .circle4 {            -webkit-animation-delay: -0.3s;            animation-delay: -0.3s;        }        .container2 .circle4 {            -webkit-animation-delay: -0.2s;            animation-delay: -0.2s;        }        .container3 .circle4 {            -webkit-animation-delay: -0.1s;            animation-delay: -0.1s;        }        @-webkit-keyframes bouncedelay {            0%,            80%,            100% {                -webkit-transform: scale(0.0)            }            40% {                -webkit-transform: scale(1.0)            }        }        @keyframes bouncedelay {            0%,            80%,            100% {                transform: scale(0.0);                -webkit-transform: scale(0.0);            }            40% {                transform: scale(1.0);                -webkit-transform: scale(1.0);            }        }    </style></head><body><div id="startmengban" >    <div class="center">        <div class="spinner">            <div class="spinner-container container1">                <div class="circle1"></div>                <div class="circle2"></div>                <div class="circle3"></div>                <div class="circle4"></div>            </div>            <div class="spinner-container container2">                <div class="circle1"></div>                <div class="circle2"></div>                <div class="circle3"></div>                <div class="circle4"></div>            </div>            <div class="spinner-container container3">                <div class="circle1"></div>                <div class="circle2"></div>                <div class="circle3"></div>                <div class="circle4"></div>            </div>        </div>        <h2>更新进度<span id="jindu" class="jindu">0%</span></h2>    </div></div></body></html>
相关阅读:
gcc 工作流程和常用参数
 解决webstorm卡顿问题，下面详细设置方法，使得webstorm快速打开
 使用vue 3.0 初始化vue脚手架
 vue父组件更新，子组件也更新的方法
 vue 父子组件渲染
 数组对象去重 reduce()
webstorm 点击右上角运行run 启动vue项目
 寻找的常用webstorm快捷键
 mORMot使用基础1（转）
win7共享win10打印机提示无法连接到打印机错误 bcb
原文地址：https://www.cnblogs.com/peijunma/p/6090250.html