css实现十六种loading加载动画集合效果代码-html代码-BFW代码库

代码语言：html
代码描述：css实现十六种loading加载动画集合效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>
    <style>
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .cf:before,
        .cf:after {
            content: " ";
            /* 1 */
            display: table;
            /* 2 */
        }

        .cf:after {
            clear: both;
        }

        html {
            color: #fff;
            font-family: 'Source Sans Pro', sans-serif;
            background-color: #59488b;
        }
        h1,h2 {
            color: rgba(255,255,255,0.5);
            font-size: 40px;
            font-weight: 200;
            text-align: center;
            margin: 40px 0 0 0;
        }
        h2 {
            font-size: 18px;
            margin: 0;
            padding: 0;
            margin: 10px 0;
        }
        h1 span {
            font-size: 30px;
        }

        a {
            text-decoration: none;
        }
        a:hover {
            transition: all linear 0.2s;
        }
        ::-moz-selection {
            background: #b3d4fc;
            text-shadow: none;
        }
        ::selection {
            background: #b3d4fc;
            text-shadow: none;
        }


        .wrapper {
            width: 700px;
            margin: 0 auto;
        }
        .row {
            text-align: center;
            padding: 50px 0;
        }
        .span, .span_large {
            float: left;
            width: 100px;
            background-color: rgba(0,0,0, 0.02);
            height: 100px;
            vertical-align: middle;
            border-radius: 1px;
            margin-right: 100px;
        }
        .span:last-child {
            margin-right: 0px;
        }

        /* Timer*/
        .timer {
            width: 24px;
            height: 24px;
            background-color: transparent;
            box-shadow: inset 0px 0px 0px 2px #fff;
            border-radius: 50%;
            position: relative;
            margin: 38px auto;
            /* Not necessary- its only for layouting*/
        }
        .timer:after, .timer:before {
            position: absolute;
            content: "";
            background-color: #fff;
        }
        .timer:after {
            width: 10px;
            height: 2px;
            top: 11px;
            left: 11px;
            -webkit-transform-origin: 1px 1px;
            -moz-transform-origin: 1px 1px;
            transform-origin: 1px 1px;
            -webkit-animation: minhand 2s linear infinite;
            -moz-animation: minhand 2s linear infinite;
            animation: minhand 2s linear infinite;
        }

        .timer:before {
            width: 8px;
            height: 2px;
            top: 11px;
            left: 11px;
            -webkit-transform-origin: 1px 1px;
            -moz-transform-origin: 1px 1px;
            transform-origin: 1px 1px;
            -webkit-animation: hrhand 8s linear infinite;
            -moz-animation: hrhand 8s linear infinite;
            animation: hrhand 8s linear infinite;
        }

@-webkit-keyframes minhand {
            0% {
                -webkit-transform: rotate(0deg)
            }
            100% {
                -webkit-transform: rotate(360deg)
            }
        }
@-moz-keyframes minhand {
            0% {
                -moz-transform: rotate(0deg)
            }
            100% {
                -moz-transform: rotate(360deg)
            }
        }
@keyframes minhand {
            0% {
                transform: rotate(0deg)
            }
            100% {
                transform: rotate(360deg)
            }
        }

@-webkit-keyframes hrhand {
            0% {
                -webkit-transform: rotate(0deg)
            }
            100% {
                -webkit-transform: rotate(360deg)
            }
        }
@-moz-keyframes hrhand {
            0% {
                -moz-transform: rotate(0deg)
            }
            100% {
                -moz-transform: rotate(360deg)
            }
        }
@keyframes hrhand {
            0% {
                transform: rotate(0deg)
            }
            100% {
                transform: rotate(360deg)
            }
        }

        /*Typing Loader*/
        .typing_loader {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            -webkit-animation: typing 1s linear infinite alternate;
            -moz-animation: Typing 1s linear infinite alternate;
            animation: typing 1s linear infinite alternate;
            margin: 46px auto;
            /* Not necessary- its only for layouting*/
            position: relative;
            left: -12px;
        }
@-webkit-keyframes typing {
            0% {
                background-color: rgba(255,255,255, 1);
                box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
                24px 0px 0px 0px rgba(255,255,255,0.2);
            }
            25% {
                background-color: rgba(255,255,255, 0.4);
                box-shadow: 12px 0px 0px 0px rgba(255,255,255,2),
                24px 0px 0px 0px rgba(255,255,255,0.2);
            }
            75% {
                background-color: rgba(255,255,255, 0.4);
                box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
                24px 0px 0px 0px rgba(255,255,255,1);
            }
        }

@-moz-keyframes typing {
            0% {
                background-color: rgba(255,255,255, 1);
                box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
                24px 0px 0px 0px rgba(255,255,255,0.2);
            }
            25% {
                background-color: rgba(255,255,255, 0.4);
                box-shadow: 12px 0px 0px 0px rgba(255,255,255,2),
                24px 0px 0px 0px rgba(255,255,255,0.2);
            }
            75% {
                background-color: rgba(255,255,255, 0.4);
                box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
                24px 0px 0px 0px rgba(255,255,255,1);
            }
        }

@keyframes typing {
            0% {
                background-color: rgba(255,255,255, 1);
                box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
                24px 0px 0px 0px rgba(255,255,255,0.2);
            }
            25% {
                background-color: rgba(255,255,255, 0.4);
                box-shadow: 12px 0px 0px 0px rgba(255,255,255,2),
                24px 0px 0px 0px rgba(255,255,255,0.2);
            }
            75% {
                background-color: rgba(255,255,255, 0.4);
                box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
                24px 0px 0px 0px rgba(255,255,255,1);
            }
        }

        /*Location indicator */
        .location_indicator {
            margin: 30px auto;
            position: relative;
            left: -9px;
        }

        .location_indicator:before, .location_indicator:after {
            position: absolute;
            content: "";
        }

        .location_indicator:before {
            width: 20px;
            height: 20px;
            border-radius: 100% 100% 100% 0;
            box-shadow: 0px 0px 0px 2px rgba(255,255,255,1);
            -webkit-animation: mapping 1s linear infinite;
            -moz-animation: mapping 1s linear infinite;
            animation: mapping 1s linear infinite;
            -webkit-transform: rotate(-46deg);
            -moz-transform: rotate(-46deg);
            transform: rotate(-46deg);

        }

        .location_indicator:after {
            width: 30px;
            height: 10px;
            border-radius: 100%;
            left: 44px;
            background-color: rgba(255, 255, 255, 0.2);
            top: 24px;
            z-index: -1;
        }

@-webkit-keyframes mapping {
            0% {
                top: 0;
            }
            50% {
                top: -5px;
            }
            100% {
                top: 0;
            }
        }
@-moz-keyframes mapping {
            0% {
                top: 0;
            }
            50% {
                top: -5px;
            }
            100% {
                top: 0;
            }
        }
@-keyframes mapping {
            0% {
                top: 0;
            }
            50% {
                top: -5px;
            }
            100% {
                top: 0;
            }
        }

        /* go in*/
        .dashboard {
            width: 32px;
            height: 32px;
            margin: 30px auto;
            border: 2px rgba(255,255,255,1) solid;
            border-radius: 100%;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        .dashboard:after, .dashboard:before {
            position: absolute;
            content: "";
        }
        .dashboard:after {
            width: 14px;
            height: 2px;
            top: 20px;
            -webkit-transform-origin: 1px 1px;
            -moz-transform-origin: 1px 1px;
            transform-origin: 1px 1px;
            background-color: rgba(255,255,255,1);
            -webkit-animation: dashboard_hand 2s linear infinite alternate;
            -moz-animation: dashboard_hand 2s linear infinite alternate;
            animation: dashboard_hand 2s linear infinite alternate;
        }
        .dashboard:before {
            width: 32px;
            height: 10px;
            background-color: rgba(255,255,255,1);
            top: 20px;
            left: -2px;
        }
@-webkit-keyframes dashboard_hand {
            0% {
                -webkit-transform: rotate(-160deg);
            }
            100% {
                -webkit-transform: rotate(-20deg);
            }
        }
@-moz-keyframes dashboard_hand {
            0% {
                -moz-transform: rotate(-160deg);
            }
            100% {
                -moz-transform: rotate(-20deg);
            }
        }
@keyframes dashboard_hand {
            0% {
                transform: rotate(-160deg);
            }
            100% {
                transform: rotate(-20deg);
            }
        }

        /*Battery*/
        .battery {
            width: 28px;
            height: 14px;
            border: 1px #fff solid;
            border-radius: 2px;
            position: relative;
            -webkit-animation: charge 5s linear infinite;
            -moz-animation: charge 5s linear infinite;
            animation: charge 5s linear infinite;
            top: 40px;
            margin: 0 auto;
        }
        .battery:after {
            width: 2px;
            height: 7px;
            background-color: #fff;
            border-radius: 0px 1px 1px 0px;
            position: absolute;
            content: "";
            top: 2px;
            right: -4px;
        }
@-webkit-keyframes charge {
            0% {
                box-shadow: inset 0px 0px 0px #fff;
            }
            100% {
                box-shadow: inset 30px 0px 0px #fff;
            }
        }
@-moz-keyframes charge {
            0% {
                box-shadow: inset 0px 0px 0px #fff;
            }
            100% {
                box-shadow: inset 30px 0px 0px #fff;
            }
        }
@keyframes charge {
            0% {
                box-shadow: inset 0px 0px 0px #fff;
            }
            100% {
                box-shadow: inset 30px 0px 0px #fff;
            }
        }

        .magnifier {
            width: 20px;
            height: 20px;
            box-shadow: 0px 0px 0px 1px #fff;
            border-radius: 50%;
            position: relative;
            margin: 34px auto;
            -webkit-animation: magnify 1s linear infinite alternate;
            -moz-animation: magnify 1s linear infinite alternate;
            animation: magnify 1s linear infinite alternate;
        }
        .magnifier:after, .magnifier:before {
            position: absolute;
            content: "";
        }
        .magnifier:before {
            content: "me";
            font-size: 12px;
            left: 2px;
            text-align: center;
            top: 2px;
        }
        .magnifier:after {
            width: 2px;
            height: 8px;
            background-color: #fff;
            bottom: -6px;
            left: 20px;
            border-radius: 2px;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

@-webkit-keyframes magnify {
            0% {
                -webkit-transform: scale(1);
            }
            100% {
                -webkit-transform: scale(1.5);
            }
        }
@-moz-keyframes magnify {
            0% {
                -moz-transform: scale(1);
            }
            100% {
                -moz-transform: scale(1.5);
            }
        }
@keyframes magnify {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(1.5);
            }
        }

        /*help*/
        .help {
            width: 30px;
            height: 30px;
            border: 1px #fff solid;
            border-radius: 50%;
            -webkit-animation: rotation 1s ease-in-out infinite;
            -moz-animation: rotation 1s ease-in-out infinite;
            animation: rotation 1s ease-in-out infinite;
            margin: 30px auto;
        }
        .help:after {
            width: 5px;
            height: 5px;
            background-color: rgba(255,255,255,1);
            border-radius: 100%;
            position: absolute;
            content: "";
        }
@-webkit-keyframes rotation {
            0% {
                -webkit-transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }
@-moz-keyframes rotation {
            0% {
                -moz-transform: rotate(0deg);
            }
            100% {
                -moz-transform: rotate(360deg);
            }
        }
@keyframes rotation {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        /*eye ball*/
        .eye {
            width: 20px;
            height: 20px;
            background-color: r.........完整代码请登录后点击上方下载按钮下载查看