19种loading css汇总

最新推荐文章于 2024-06-25 10:37:03 发布
最新推荐文章于 2024-06-25 10:37:03 发布
阅读量269 收藏
点赞数
文章标签： css
原文链接：https://wow.techbrood.com/fiddle/29490
版权

19种loading css汇总


链接: CSS3 19种LOADING（加载）.
链接: https://github.com/lukehaas/css-loaders. 

<!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">
    <style>
        body {
            background: #323943;
            text-align: center;
            width: 960px;
            max-width: 100%;
            margin: 0 auto;
            box-sizing: border-box;
            font-family: sans-serif;
            color: rgba(200, 200, 200, 0.5);
        }

        body *,
        body *:before,
        body *:after {
            box-sizing: inherit;
        }

        .box {
            display: inline-block;
            width: 200px;
            height: 200px;
            border: 1px solid currentcolor;
            border-radius: 3px;
            font-size: 30px;
            color: rgba(200, 200, 200, 0.5);
            padding: 1em;
            margin-bottom: .25em;
            vertical-align: top;
            -webkit-transition: .3s color, .3s border;
            transition: .3s color, .3s border;
        }

        .box:hover {
            color: #d60b52;
            font-size: 0;
            padding: 0;
            border-width: 3px;
            line-height: 200px;
        }

        .box:hover [class*="loader-"] {
            font-size: 70px;
            line-height: 200px;
        }

        [class*="loader-"] {
            display: inline-block;
            width: 1em;
            height: 1em;
            color: inherit;
            vertical-align: middle;
            pointer-events: none;
        }

        .loader-01 {
            border: .2em dotted currentcolor;
            border-radius: 50%;
            -webkit-animation: 1s loader-01 linear infinite;
            animation: 1s loader-01 linear infinite;
        }

        @-webkit-keyframes loader-01 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes loader-01 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        .loader-02 {
            border: .2em solid transparent;
            border-left-color: currentcolor;
            border-right-color: currentcolor;
            border-radius: 50%;
            -webkit-animation: 1s loader-02 linear infinite;
            animation: 1s loader-02 linear infinite;
        }

        @-webkit-keyframes loader-02 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes loader-02 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        .loader-03 {
            border: .2em solid currentcolor;
            border-bottom-color: transparent;
            border-radius: 50%;
            -webkit-animation: 1s loader-03 linear infinite;
            animation: 1s loader-03 linear infinite;
            position: relative;
        }

        @-webkit-keyframes loader-03 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes loader-03 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        .loader-04 {
            border: 1px solid currentcolor;
            border-radius: 50%;
            -webkit-animation: 1s loader-04 linear infinite;
            animation: 1s loader-04 linear infinite;
            position: relative;
        }

        .loader-04:before {
            content: '';
            display: block;
            width: 0;
            height: 0;
            position: absolute;
            top: -.2em;
            left: 50%;
            border: .2em solid currentcolor;
            border-radius: 50%;
        }

        @-webkit-keyframes loader-04 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes loader-04 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        .loader-05 {
            border: .2em solid transparent;
            border-top-color: currentcolor;
            border-radius: 50%;
            -webkit-animation: 1s loader-05 linear infinite;
            animation: 1s loader-05 linear infinite;
            position: relative;
        }

        .loader-05:before {
            content: '';
            display: block;
            width: inherit;
            height: inherit;
            position: absolute;
            top: -.2em;
            left: -.2em;
            border: .2em solid currentcolor;
            border-radius: 50%;
            opacity: .5;
        }

        @-webkit-keyframes loader-05 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes loader-05 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        .loader-06 {
            border: .2em solid currentcolor;
            border-radius: 50%;
            -webkit-animation: loader-06 1s ease-out infinite;
            animation: loader-06 1s ease-out infinite;
        }

        @-webkit-keyframes loader-06 {
            0% {
                -webkit-transform: scale(0);
                transform: scale(0);
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 0;
            }
        }

        @keyframes loader-06 {
            0% {
                -webkit-transform: scale(0);
                transform: scale(0);
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 0;
            }
        }

        .loader-07 {
            border: 0 solid transparent;
            border-radius: 50%;
            position: relative;
        }

        .loader-07:before,
        .loader-07:after {
            content: '';
            border: .2em solid currentcolor;
            border-radius: 50%;
            width: inherit;
            height: inherit;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-animation: loader-07 1s linear infinite;
            animation: loader-07 1s linear infinite;
            opacity: 0;
        }

        .loader-07:before {
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
        }

        .loader-07:after {
            -webkit-animation-delay: .5s;
            animation-delay: .5s;
        }

        @-webkit-keyframes loader-07 {
            0% {
                -webkit-transform: scale(0);
                transform: scale(0);
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 0;
            }
        }

        @keyframes loader-07 {
            0% {
                -webkit-transform: scale(0);
                transform: scale(0);
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 0;
            }
        }

        .loader-08 {
            position: relative;
        }

        .loader-08:before,
        .loader-08:after {
            content: '';
            width: inherit;
            height: inherit;
            border-radius: 50%;
            background-color: currentcolor;
            opacity: 0.6;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-animation: loader-08 2.0s infinite ease-in-out;
            animation: loader-08 2.0s infinite ease-in-out;
        }

        .loader-08:after {
            -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
        }

        @-webkit-keyframes loader-08 {

            0%,
            100% {
                -webkit-transform: scale(0);
                transform: scale(0);
            }

            50% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        @keyframes loader-08 {

            0%,
            100% {
                -webkit-transform: scale(0);
                transform: scale(0);
            }

            50% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        .loader-09 {
            background-color: currentcolor;
            border-radius: 50%;
            -webkit-animation: loader-09 1.0s infinite ease-in-out;
            animation: loader-09 1.0s infinite ease-in-out;
        }

        @-webkit-keyframes loader-09 {
            0% {
                -webkit-transform: scale(0);
                transform: scale(0);
            }

            100% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 0;
            }
        }

        @keyframes loader-09 {
            0% {
                -webkit-transform: scale(0);
                transform: scale(0);
            }

            100% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 0;
            }
        }

        .loader-10 {
            position: relative;
            -webkit-animation: loader-10-1 2.0s infinite linear;
            animation: loader-10-1 2.0s infinite linear;
        }

        .loader-10:before,
        .loader-10:after {
            content: '';
            width: 0;
            height: 0;
            border: .5em solid currentcolor;
            display: block;
            position: absolute;
            border-radius: 100%;
            -webkit-animation: loader-10-2 2s infinite ease-in-out;
            animation: loader-10-2 2s infinite ease-in-out;
        }

        .loader-10:before {
            top: 0;
            left: 50%;
        }

        .loader-10:after {
            bottom: 0;
            right: 50%;
            -webkit-animation-delay: -1s;
            animation-delay: -1s;
        }

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

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

        @-webkit-keyframes loader-10-2 {

            0%,
            100% {
                -webkit-transform: scale(0);
                transform: scale(0);
            }

            50% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        @keyframes loader-10-2 {

            0%,
            100% {
                -webkit-transform: scale(0);
                transform: scale(0);
            }

            50% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        .loader-11 {
            background-color: currentcolor;
            -webkit-animation: loader-11 1.2s infinite ease-in-out;
            animation: loader-11 1.2s infinite ease-in-out;
        }

        @-webkit-keyframes loader-11 {
            0% {
                -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
                transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            }

            50% {
                -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
                transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
            }

            100% {
                -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
                transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            }
        }

        @keyframes loader-11 {
            0% {
                -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
                transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            }

            50% {
                -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
                transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
            }

            100% {
                -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
                transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            }
        }

        .loader-12 {
            position: relative;
        }

        .loader-12:before,
        .loader-12:after {
            content: '';
            display: block;
            position: absolute;
            background-color: currentcolor;
            left: 50%;
            right: 0;
            top: 0;
            bottom: 50%;
            box-shadow: -.5em 0 0 currentcolor;
            -webkit-animation: loader-12 1s linear infinite;
            animation: loader-12 1s linear infinite;
        }

        .loader-12:after {
            top: 50%;
            bottom: 0;
            -webkit-animation-delay: .25s;
            animation-delay: .25s;
        }

        @-webkit-keyframes loader-12 {

            0%,
            100% {
                box-shadow: -.5em 0 0 transparent;
                background-color: currentcolor;
            }

            50% {
                box-shadow: -.5em 0 0 currentcolor;
                background-color: transparent;
            }
        }

        @keyframes loader-12 {

            0%,
            100% {
                box-shadow: -.5em 0 0 transparent;
                background-color: currentcolor;
            }

            50% {
                box-shadow: -.5em 0 0 currentcolor;
                background-color: transparent;
            }
        }

        .loader-13:before,
        .loader-13:after,
        .loader-13 {
            border-radius: 50%;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation: loader-13 1.8s infinite ease-in-out;
            animation: loader-13 1.8s infinite ease-in-out;
        }

        .loader-13 {
            color: currentcolor;
            position: relative;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s;
            top: -1em;
        }

        .loader-13:before {
            right: 100%;
            -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s;
        }

        .loader-13:after {
            left: 100%;
        }

        .loader-13:before,
        .loader-13:after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            width: inherit;
            height: inherit;
        }

        @-webkit-keyframes loader-13 {

            0%,
            80%,
            100% {
                box-shadow: 0 1em 0 -1em;
            }

            40% {
                box-shadow: 0 1em 0 -.2em;
            }
        }

        @keyframes loader-13 {

            0%,
            80%,
            100% {
                box-shadow: 0 1em 0 -1em;
            }

            40% {
                box-shadow: 0 1em 0 -.2em;
            }
        }

        .loader-14 {
            border-radius: 50%;
            box-shadow: 0 1em 0 -.2em currentcolor;
            position: relative;
            -webkit-animation: loader-14 0.8s ease-in-out alternate infinite;
            animation: loader-14 0.8s ease-in-out alternate infinite;
            -webkit-animation-delay: 0.32s;
            animation-delay: 0.32s;
            top: -1em;
        }

        .loader-14:after,
        .loader-14:before {
            content: '';
            position: absolute;
            width: inherit;
            height: inherit;
            border-radius: inherit;
            box-shadow: inherit;
            -webkit-animation: inherit;
            animation: inherit;
        }

        .loader-14:before {
            left: -1em;
            -webkit-animation-delay: 0.48s;
            animation-delay: 0.48s;
        }

        .loader-14:after {
            right: -1em;
            -webkit-animation-delay: 0.16s;
            animation-delay: 0.16s;
        }

        @-webkit-keyframes loader-14 {
            0% {
                box-shadow: 0 2em 0 -.2em currentcolor;
            }

            100% {
                box-shadow: 0 1em 0 -.2em currentcolor;
            }
        }

        @keyframes loader-14 {
            0% {
                box-shadow: 0 2em 0 -.2em currentcolor;
            }

            100% {
                box-shadow: 0 1em 0 -.2em currentcolor;
            }
        }

        .loader-15 {
            background: currentcolor;
            position: relative;
            -webkit-animation: loader-15 1s ease-in-out infinite;
            animation: loader-15 1s ease-in-out infinite;
            -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
            width: .25em;
            height: .5em;
        }

        .loader-15:after,
        .loader-15:before {
            content: '';
            position: absolute;
            width: inherit;
            height: inherit;
            background: inherit;
            -webkit-animation: inherit;
            animation: inherit;
        }

        .loader-15:before {
            right: .5em;
            -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
        }

        .loader-15:after {
            left: .5em;
            -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;
        }

        @-webkit-keyframes loader-15 {

            0%,
            100% {
                box-shadow: 0 0 0 currentcolor, 0 0 0 currentcolor;
            }

            50% {
                box-shadow: 0 -.25em 0 currentcolor, 0 .25em 0 currentcolor;
            }
        }

        @keyframes loader-15 {

            0%,
            100% {
                box-shadow: 0 0 0 currentcolor, 0 0 0 currentcolor;
            }

            50% {
                box-shadow: 0 -.25em 0 currentcolor, 0 .25em 0 currentcolor;
            }
        }

        .loader-16 {
            -webkit-transform: rotateZ(45deg);
            transform: rotateZ(45deg);
            -webkit-perspective: 1000px;
            perspective: 1000px;
            border-radius: 50%;
        }

        .loader-16:before,
        .loader-16:after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: inherit;
            height: inherit;
            border-radius: 50%;
            -webkit-animation: 1s spin linear infinite;
            animation: 1s spin linear infinite;
        }

        .loader-16:before {
            -webkit-transform: rotateX(70deg);
            transform: rotateX(70deg);
        }

        .loader-16:after {
            -webkit-transform: rotateY(70deg);
            transform: rotateY(70deg);
            -webkit-animation-delay: .4s;
            animation-delay: .4s;
        }

        @-webkit-keyframes rotate {
            0% {
                -webkit-transform: translate(-50%, -50%) rotateZ(0deg);
                transform: translate(-50%, -50%) rotateZ(0deg);
            }

            100% {
                -webkit-transform: translate(-50%, -50%) rotateZ(360deg);
                transform: translate(-50%, -50%) rotateZ(360deg);
            }
        }

        @keyframes rotate {
            0% {
                -webkit-transform: translate(-50%, -50%) rotateZ(0deg);
                transform: translate(-50%, -50%) rotateZ(0deg);
            }

            100% {
                -webkit-transform: translate(-50%, -50%) rotateZ(360deg);
                transform: translate(-50%, -50%) rotateZ(360deg);
            }
        }

        @-webkit-keyframes rotateccw {
            0% {
                -webkit-transform: translate(-50%, -50%) rotate(0deg);
                transform: translate(-50%, -50%) rotate(0deg);
            }

            100% {
                -webkit-transform: translate(-50%, -50%) rotate(-360deg);
                transform: translate(-50%, -50%) rotate(-360deg);
            }
        }

        @keyframes rotateccw {
            0% {
                -webkit-transform: translate(-50%, -50%) rotate(0deg);
                transform: translate(-50%, -50%) rotate(0deg);
            }

            100% {
                -webkit-transform: translate(-50%, -50%) rotate(-360deg);
                transform: translate(-50%, -50%) rotate(-360deg);
            }
        }

        @-webkit-keyframes spin {

            0%,
            100% {
                box-shadow: .2em 0px 0 0px currentcolor;
            }

            12% {
                box-shadow: .2em .2em 0 0 currentcolor;
            }

            25% {
                box-shadow: 0 .2em 0 0px currentcolor;
            }

            37% {
                box-shadow: -.2em .2em 0 0 currentcolor;
            }

            50% {
                box-shadow: -.2em 0 0 0 currentcolor;
            }

            62% {
                box-shadow: -.2em -.2em 0 0 currentcolor;
            }

            75% {
                box-shadow: 0px -.2em 0 0 currentcolor;
            }

            87% {
                box-shadow: .2em -.2em 0 0 currentcolor;
            }
        }

        @keyframes spin {

            0%,
            100% {
                box-shadow: .2em 0px 0 0px currentcolor;
            }

            12% {
                box-shadow: .2em .2em 0 0 currentcolor;
            }

            25% {
                box-shadow: 0 .2em 0 0px currentcolor;
            }

            37% {
                box-shadow: -.2em .2em 0 0 currentcolor;
            }

            50% {
                box-shadow: -.2em 0 0 0 currentcolor;
            }

            62% {
                box-shadow: -.2em -.2em 0 0 currentcolor;
            }

            75% {
                box-shadow: 0px -.2em 0 0 currentcolor;
            }

            87% {
                box-shadow: .2em -.2em 0 0 currentcolor;
            }
        }

        .loader-17 {
            position: relative;
            background-color: currentcolor;
            border-radius: 50%;
        }

        .loader-17:after,
        .loader-17:before {
            content: "";
            position: absolute;
            width: .25em;
            height: .25em;
            border-radius: 50%;
            opacity: .8;
        }

        .loader-17:after {
            left: -.5em;
            top: -.25em;
            background-color: currentcolor;
            -webkit-transform-origin: .75em 1em;
            transform-origin: .75em 1em;
            -webkit-animation: loader-17 1s linear infinite;
            animation: loader-17 1s linear infinite;
            opacity: .6;
        }

        .loader-17:before {
            left: -1.25em;
            top: -.75em;
            background-color: currentcolor;
            -webkit-transform-origin: 1.5em 1em;
            transform-origin: 1.5em 1em;
            -webkit-animation: loader-17 2s linear infinite;
            animation: loader-17 2s linear infinite;
        }

        @-webkit-keyframes loader-17 {
            0% {
                -webkit-transform: rotateZ(0deg) translate3d(0, 0, 0);
                transform: rotateZ(0deg) translate3d(0, 0, 0);
            }

            100% {
                -webkit-transform: rotateZ(360deg) translate3d(0, 0, 0);
                transform: rotateZ(360deg) translate3d(0, 0, 0);
            }
        }

        @keyframes loader-17 {
            0% {
                -webkit-transform: rotateZ(0deg) translate3d(0, 0, 0);
                transform: rotateZ(0deg) translate3d(0, 0, 0);
            }

            100% {
                -webkit-transform: rotateZ(360deg) translate3d(0, 0, 0);
                transform: rotateZ(360deg) translate3d(0, 0, 0);
            }
        }

        .loader-18 {
            position: relative;
        }

        .loader-18:before,
        .loader-18:after {
            content: '';
            display: block;
            position: absolute;
            border-radius: 50%;
            border: .1em solid transparent;
            border-bottom-color: currentcolor;
            top: 0;
            left: 0;
            -webkit-animation: 1s loader-18 linear infinite;
            animation: 1s loader-18 linear infinite;
        }

        .loader-18:before {
            width: 1em;
            height: 1em;
        }

        .loader-18:after {
            width: .8em;
            height: .8em;
            top: .1em;
            left: .1em;
            -webkit-animation-direction: reverse;
            animation-direction: reverse;
        }

        @-webkit-keyframes loader-18 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes loader-18 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        .loader-19 {
            border-top: .2em solid currentcolor;
            border-right: .2em solid transparent;
            -webkit-animation: loader-19 1s linear infinite;
            animation: loader-19 1s linear infinite;
            border-radius: 100%;
            position: relative;
        }

        @-webkit-keyframes loader-19 {
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes loader-19 {
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
    </style>
    <title>Document</title>
</head>

<body>
    <h1>CSS LOADERS</h1>
    <div class="box">loader 1
        <div class="loader-01"></div>
    </div>
    <div class="box">loader 2
        <div class="loader-02"></div>
    </div>
    <div class="box">loader 3
        <div class="loader-03"></div>
    </div>
    <div class="box">loader 4
        <div class="loader-04"></div>
    </div>
    <div class="box">loader 5
        <div class="loader-05"></div>
    </div>
    <div class="box">loader 6
        <div class="loader-06"></div>
    </div>
    <div class="box">loader 7
        <div class="loader-07"></div>
    </div>
    <div class="box">loader 8
        <div class="loader-08"></div>
    </div>
    <div class="box">loader 9
        <div class="loader-09"></div>
    </div>
    <div class="box">loader 10
        <div class="loader-10"></div>
    </div>
    <div class="box">loader 11
        <div class="loader-11"></div>
    </div>
    <div class="box">loader 12
        <div class="loader-12"></div>
    </div>
    <div class="box">loader 13
        <div class="loader-13"></div>
    </div>
    <div class="box">loader 14
        <div class="loader-14"></div>
    </div>
    <div class="box">loader 15
        <div class="loader-15"></div>
    </div>
    <div class="box">loader 16
        <div class="loader-16"></div>
    </div>
    <div class="box">loader 17
        <div class="loader-17"></div>
    </div>
    <div class="box">loader 18
        <div class="loader-18"></div>
    </div>
    <div class="box">loader 19
        <div class="loader-19"></div>
    </div>
    <script>

    </script>
</body>

</html>

<!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">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: 'Open Sans', sans-serif;
        }

        a {
            text-decoration: none;
        }

        /* GRID */

        .twelve {
            width: 100%;
        }

        .eleven {
            width: 91.53%;
        }

        .ten {
            width: 83.06%;
        }

        .nine {
            width: 74.6%;
        }

        .eight {
            width: 66.13%;
        }

        .seven {
            width: 57.66%;
        }

        .six {
            width: 49.2%;
        }

        .five {
            width: 40.73%;
        }

        .four {
            width: 32.26%;
        }

        .three {
            width: 23.8%;
        }

        .two {
            width: 15.33%;
        }

        .one {
            width: 6.866%;
        }

        /* COLUMNS */

        .col {
            display: block;
            float: left;
            margin: 1% 0 1% 1.6%;
        }

        .col:first-of-type {
            margin-left: 0;
        }

        .container {
            width: 100%;
            max-width: 940px;
            margin: 0 auto;
            position: relative;
            text-align: center;
        }

        /* CLEARFIX */

        .cf:before,
        .cf:after {
            content: " ";
            display: table;
        }

        .cf:after {
            clear: both;
        }

        .cf {
            *zoom: 1;
        }

        .row {
            margin: 30px 0;
        }

        .three {
            background-color: #eee;
            padding: 50px 0;
        }

        /* ALL LOADERS */

        .loader {
            width: 100px;
            height: 100px;
            border-radius: 100%;
            position: relative;
            margin: 0 auto;
        }

        /* LOADER 1 */

        #loader-1:before,
        #loader-1:after {
            content: "";
            position: absolute;
            top: -10px;
            left: -10px;
            width: 100%;
            height: 100%;
            border-radius: 100%;
            border: 10px solid transparent;
            border-top-color: #3498db;
        }

        #loader-1:before {
            z-index: 100;
            animation: spin 1s infinite;
        }

        #loader-1:after {
            border: 10px solid #ccc;
        }

        @keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        /* LOADER 2 */

        #loader-2 span {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 100%;
            background-color: #3498db;
            margin: 35px 5px;
        }

        #loader-2 span:nth-child(1) {
            animation: bounce 1s ease-in-out infinite;
        }

        #loader-2 span:nth-child(2) {
            animation: bounce 1s ease-in-out 0.33s infinite;
        }

        #loader-2 span:nth-child(3) {
            animation: bounce 1s ease-in-out 0.66s infinite;
        }

        @keyframes bounce {

            0%,
            75%,
            100% {
                -webkit-transform: translateY(0);
                -ms-transform: translateY(0);
                -o-transform: translateY(0);
                transform: translateY(0);
            }

            25% {
                -webkit-transform: translateY(-20px);
                -ms-transform: translateY(-20px);
                -o-transform: translateY(-20px);
                transform: translateY(-20px);
            }
        }

        /* LOADER 3 */

        #loader-3:before,
        #loader-3:after {
            content: "";
            width: 20px;
            height: 20px;
            position: absolute;
            top: 0;
            left: calc(50% - 10px);
            background-color: #3498db;
            animation: squaremove 1s ease-in-out infinite;
        }

        #loader-3:after {
            bottom: 0;
            animation-delay: 0.5s;
        }

        @keyframes squaremove {

            0%,
            100% {
                -webkit-transform: translate(0, 0) rotate(0);
                -ms-transform: translate(0, 0) rotate(0);
                -o-transform: translate(0, 0) rotate(0);
                transform: translate(0, 0) rotate(0);
            }

            25% {
                -webkit-transform: translate(40px, 40px) rotate(45deg);
                -ms-transform: translate(40px, 40px) rotate(45deg);
                -o-transform: translate(40px, 40px) rotate(45deg);
                transform: translate(40px, 40px) rotate(45deg);
            }

            50% {
                -webkit-transform: translate(0px, 80px) rotate(0deg);
                -ms-transform: translate(0px, 80px) rotate(0deg);
                -o-transform: translate(0px, 80px) rotate(0deg);
                transform: translate(0px, 80px) rotate(0deg);
            }

            75% {
                -webkit-transform: translate(-40px, 40px) rotate(45deg);
                -ms-transform: translate(-40px, 40px) rotate(45deg);
                -o-transform: translate(-40px, 40px) rotate(45deg);
                transform: translate(-40px, 40px) rotate(45deg);
            }
        }

        /* LOADER 4 */

        #loader-4 span {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 100%;
            background-color: #3498db;
            margin: 35px 5px;
            opacity: 0;
        }

        #loader-4 span:nth-child(1) {
            animation: opacitychange 1s ease-in-out infinite;
        }

        #loader-4 span:nth-child(2) {
            animation: opacitychange 1s ease-in-out 0.33s infinite;
        }

        #loader-4 span:nth-child(3) {
            animation: opacitychange 1s ease-in-out 0.66s infinite;
        }

        @keyframes opacitychange {

            0%,
            100% {
                opacity: 0;
            }

            60% {
                opacity: 1;
            }
        }

        /* LOADER 5 */

        #loader-5 span {
            display: block;
            position: absolute;
            left: calc(50% - 20px);
            top: calc(50% - 20px);
            width: 20px;
            height: 20px;
            background-color: #3498db;
        }

        #loader-5 span:nth-child(2) {
            animation: moveanimation1 1s ease-in-out infinite;
        }

        #loader-5 span:nth-child(3) {
            animation: moveanimation2 1s ease-in-out infinite;
        }

        #loader-5 span:nth-child(4) {
            animation: moveanimation3 1s ease-in-out infinite;
        }

        @keyframes moveanimation1 {

            0%,
            100% {
                -webkit-transform: translateX(0px);
                -ms-transform: translateX(0px);
                -o-transform: translateX(0px);
                transform: translateX(0px);
            }

            75% {
                -webkit-transform: translateX(30px);
                -ms-transform: translateX(30px);
                -o-transform: translateX(30px);
                transform: translateX(30px);
            }
        }

        @keyframes moveanimation2 {

            0%,
            100% {
                -webkit-transform: translateY(0px);
                -ms-transform: translateY(0px);
                -o-transform: translateY(0px);
                transform: translateY(0px);
            }

            75% {
                -webkit-transform: translateY(30px);
                -ms-transform: translateY(30px);
                -o-transform: translateY(30px);
                transform: translateY(30px);
            }
        }

        @keyframes moveanimation3 {

            0%,
            100% {
                -webkit-transform: translate(0px, 0px);
                -ms-transform: translate(0px, 0px);
                -o-transform: translate(0px, 0px);
                transform: translate(0px, 0px);
            }

            75% {
                -webkit-transform: translate(30px, 30px);
                -ms-transform: translate(30px, 30px);
                -o-transform: translate(30px, 30px);
                transform: translate(30px, 30px);
            }
        }

        /* LOADER 6 */

        #loader-6 {
            top: 40px;
            left: -2.5px;
        }

        #loader-6 span {
            display: inline-block;
            width: 5px;
            height: 20px;
            background-color: #3498db;
        }

        #loader-6 span:nth-child(1) {
            animation: grow 1s ease-in-out infinite;
        }

        #loader-6 span:nth-child(2) {
            animation: grow 1s ease-in-out 0.15s infinite;
        }

        #loader-6 span:nth-child(3) {
            animation: grow 1s ease-in-out 0.30s infinite;
        }

        #loader-6 span:nth-child(4) {
            animation: grow 1s ease-in-out 0.45s infinite;
        }

        @keyframes grow {

            0%,
            100% {
                -webkit-transform: scaleY(1);
                -ms-transform: scaleY(1);
                -o-transform: scaleY(1);
                transform: scaleY(1);
            }

            50% {
                -webkit-transform: scaleY(1.8);
                -ms-transform: scaleY(1.8);
                -o-transform: scaleY(1.8);
                transform: scaleY(1.8);
            }
        }

        /* LOADER 7 */

        #loader-7 {
            -webkit-perspective: 120px;
            -moz-perspective: 120px;
            -ms-perspective: 120px;
            perspective: 120px;
        }

        #loader-7:before {
            content: "";
            position: absolute;
            left: 25px;
            top: 25px;
            width: 50px;
            height: 50px;
            background-color: #3498db;
            animation: flip 1s infinite;
        }

        @keyframes flip {
            0% {
                transform: rotate(0);
            }

            50% {
                transform: rotateY(180deg);
            }

            100% {
                transform: rotateY(180deg) rotateX(180deg);
            }
        }

        /* LOADER 8 */

        #loader-8:before {
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            top: calc(50% - 10px);
            left: 0px;
            background-color: #3498db;
            animation: rotatemove 1s infinite;
        }

        @keyframes rotatemove {
            0% {
                -webkit-transform: scale(1) translateX(0px);
                -ms-transform: scale(1) translateX(0px);
                -o-transform: scale(1) translateX(0px);
                transform: scale(1) translateX(0px);
            }

            100% {
                -webkit-transform: scale(2) translateX(45px);
                -ms-transform: scale(2) translateX(45px);
                -o-transform: scale(2) translateX(45px);
                transform: scale(2) translateX(45px);
            }
        }
    </style>
    <title>Document</title>
</head>

<body>
    <div class="container">
        <h1>CSS Loaders</h1>
        <div class="row cf">
            <div class="three col">
                <div class="loader" id="loader-1"></div>
            </div>
            <div class="three col">
                <div class="loader" id="loader-2">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <div class="three col">
                <div class="loader" id="loader-3"></div>
            </div>
            <div class="three col">
                <div class="loader" id="loader-4">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>

        <div class="row cf">
            <div class="three col">
                <div class="loader" id="loader-5">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <div class="three col">
                <div class="loader" id="loader-6">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <div class="three col">
                <div class="loader" id="loader-7"></div>
            </div>
            <div class="three col">
                <div class="loader" id="loader-8"></div>
            </div>
        </div>
    </div>
    <script>

    </script>
</body>

</html>

<!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">
    <style>
        /**
 * Loading animation like the one seen on http://www.freeger.com/projects/contextad/ with CSS
 * Caveat: Not DRY. The content needs to be repeated in a data- attribute (or directly in the CSS).
 */

        body {
            background: #ccc51c;
            min-height: 100%;
        }

        h1 {
            position: absolute;
            left: 50%;
            margin-left: -1.9em;
            color: hsla(0, 0%, 100%, .3);
            font: 900 800% Baskerville, 'Palatino Linotype', Palatino, serif;
        }

        @keyframes loading {
            from {
                max-width: 0;
            }
        }

        h1:before {
            content: attr(data-content);
            position: absolute;
            overflow: hidden;
            max-width: 4em;
            color: white;
            animation: loading 10s linear;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <h1 data-content="hello">hello</h1>
    <script>

    </script>
</body>

</html>
怕黑咯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css实现loading,CSS3实现10种Loading效果
weixin_42115074的博客
08-03 3347
很适合菜鸟，果断搬过来了。第1种效果：代码如下：htmlcss.loading{width: 80px;height: 40px;margin: 0 auto;margin-top:100px;}.loading span{display: inline-block;width: 8px;height: 100%;border-radius: 4px;background: lightgreen;...
用于AJAX程序的Loading图标汇总
02-18
为了提升用户体验，开发者通常会在数据加载过程中显示“Loading”图标，以告知用户系统正在进行后台处理，这正是“用于AJAX程序的Loading图标汇总”这个资源包的目的。 首先，我们要理解什么是AJAX。AJAX是一种在不...
css实现loading效果
tx_xiaobai的博客
11-19 369
一、 <div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> .lo...
CSS3实现8种Loading效果
最新发布
coldriversnow的专栏
06-25 205
【代码】CSS3实现8种Loading效果。
轻松掌握 CSS，实现 loading 加载中的多种形式
Shids_的博客
02-08 6202
轻松掌握 CSS，实现 loading 加载中的多种形式
CSS实现的loading页面等待效果
dha1989的博客
03-31 626
http://blog.csdn.net/playboyanta123/article/details/8183731
CSS3实现loading效果
赵花花的博客
03-23 975
记录使用css3实现一个loading效果
loading加载效果（纯css）
m0_61004873的博客
09-20 1917
页面loading加载效果
富地web端页面汇总.zip
10-21
在Web开发中，前端页面的构建通常涉及HTML、CSS和JavaScript这三种核心技术。HTML（HyperText Markup Language）用于创建网页的结构，它是网页的基础骨架。CSS（Cascading Style Sheets）则用来控制网页的样式和布局...
blog:记录工作和学习中的总结和经验。Record the summary and experience in work and study
04-30
nodejs 鉴权方式汇总流程图 koa 实现原理分析 React react 技术栈思维导图 redux 实现原理分析 Layout css 命名规则 BEM 思想 element-ui 的 scss 源码分析 Tools 代码风格自动化 gitlab 团队协作的基本使用 PlugIn ...
各种JS特效汇总
06-06
【各种JS特效汇总】 在网页开发中，JavaScript是一种不可或缺的语言，它赋予了网页动态交互的能力。本资源包中集合了一系列实用且有趣的JavaScript特效，旨在帮助开发者提升用户体验和网站的视觉吸引力。 1. **...
常用loading,gif图片大全
03-24
常用loading,gif图片大全常用loading,gif图片大全常用loading,gif图片大全常用loading,gif图片大全
html弹窗页面19种
02-09
html弹窗页面19种html弹窗页面19种html弹窗页面19种html弹窗页面19种html弹窗页面19种
炫酷loading Css
06-07
关于css 加载框 各种炫酷loading框。纯css实现。 摘抄
css3漏斗型Loading加载动画.zip
07-04
css3漏斗型Loading加载动画是一款css3 js实现的Loading加载动画特效代码。
19种CSS绚丽弹窗样式
04-25
包含了19种html5的弹出框样式
CSS3实现18种Loading效果
web前端开发
07-16 1798
来源 |https://www.jianshu.com/p/6ac3e3e12d61昨晚用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也...
css实现loading
weixin_41815063的博客
04-20 2259
<div class="loading" v-if="loading"> <div class="loading-bg"></div> <div class="loading-container"></div> </div> //css .loading { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; ...
CSS多种Loading动效
hyupeng1006的博客
08-11 2737
分享8种纯CSS实现loading加载特效的小技巧
loading css chunk 249 failed
05-09
“loading css chunk 249 failed”一般指的是在使用webpack打包压缩代码的过程中，css样式表的第249个块(chunk)加载失败引发的错误。chunk可以理解为webpack将打包后的代码分割为小块进行加载的单元，而css chunk 249则是指第249块样式表。出现这种错误通常有以下几种原因： 1.网络连接问题。这种错误可能是由于网络连接不稳定或者网络速度慢导致的，此时可以尝试在稳定的网络环境下重新加载页面或者刷新浏览器。 2.文件丢失或者路径错误。如果样式表文件丢失了或者样式表引入路径不正确，就会导致加载失败。此时需要检查路径设置是否正确，并确认样式表文件是否存在。 3.版本冲突。如果应用程序使用的是已过时的浏览器或者css版本，就会出现加载失败的错误。此时建议升级浏览器或者使用最新版本的css。 4.压缩配置问题。如果webpack的css压缩配置出现问题，也有可能导致加载失败的错误。此时需要检查webpack的配置是否正确。 总之，出现“loading css chunk 249 failed”错误一般是由于网络问题、文件路径或版本冲突、压缩配置等问题引发的，需要仔细排查确定原因，然后采取对应的措施解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值