拿来即用的loading效果

Posted 2020-10-25 Merrys
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了拿来即用的loading效果相关的知识，希望对你有一定的参考价值。
简单实用的几款，中午整理的，下午就用到了*。*
大致这样
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*loading_type1*/
        .loading_type1 {
            width: 100px;
            height: 100px;
            position: relative;
            margin: 0 auto;
            margin-top: 100px;
        }

        .loading_type1 span {
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            -webkit-animation: load_1 1.04s ease infinite;
        }

        @-webkit-keyframes load_1 {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0.2;
            }
        }

        .loading_type1 span:nth-child(1) {
            left: 0;
            top: 50%;
            margin-top: -8px;
            -webkit-animation-delay: 0.13s;
        }

        .loading_type1 span:nth-child(2) {
            left: 14px;
            top: 14px;
            -webkit-animation-delay: 0.26s;
        }

        .loading_type1 span:nth-child(3) {
            left: 50%;
            top: 0;
            margin-left: -8px;
            -webkit-animation-delay: 0.39s;
        }

        .loading_type1 span:nth-child(4) {
            top: 14px;
            right: 14px;
            -webkit-animation-delay: 0.52s;
        }

        .loading_type1 span:nth-child(5) {
            right: 0;
            top: 50%;
            margin-top: -8px;
            -webkit-animation-delay: 0.65s;
        }

        .loading_type1 span:nth-child(6) {
            right: 14px;
            bottom: 14px;
            -webkit-animation-delay: 0.78s;
        }

        .loading_type1 span:nth-child(7) {
            bottom: 0;
            left: 50%;
            margin-left: -8px;
            -webkit-animation-delay: 0.91s;
        }

        .loading_type1 span:nth-child(8) {
            bottom: 14px;
            left: 14px;
            -webkit-animation-delay: 1.04s;
        }

        /*loading_type2*/
        .loading_type2 {
            width: 100px;
            height: 100px;
            position: relative;
            margin: 0 auto;
            margin-top: 100px;
        }

        .loading_type2 span {
            display: inline-block;
            width: 30px;
            height: 10px;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            background: lightgreen;
            position: absolute;
            -webkit-animation: load_2 1.04s ease infinite;
            animation: load_2 1.04s ease infinite;
        }

        @-webkit-keyframes load_2 {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0.2;
            }
        }

        @keyframes load_2 {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0.2;
            }
        }

        .loading_type2 span:nth-child(1) {
            left: 0;
            top: 50%;
            margin-top: -5px;
            -webkit-animation-delay: 0.13s;
        }

        .loading_type2 span:nth-child(2) {
            left: 10px;
            top: 20px;
            -webkit-transform: rotate(45deg);
            -webkit-animation-delay: 0.26s;
        }

        .loading_type2 span:nth-child(3) {
            left: 50%;
            top: 10px;
            margin-left: -15px;
            -webkit-transform: rotate(90deg);
            -webkit-animation-delay: 0.39s;
        }

        .loading_type2 span:nth-child(4) {
            top: 20px;
            right: 10px;
            -webkit-transform: rotate(135deg);
            -webkit-animation-delay: 0.52s;
        }

        .loading_type2 span:nth-child(5) {
            right: 0;
            top: 50%;
            margin-top: -5px;
            -webkit-transform: rotate(180deg);
            -webkit-animation-delay: 0.65s;
        }

        .loading_type2 span:nth-child(6) {
            right: 10px;
            bottom: 20px;
            -webkit-transform: rotate(225deg);
            -webkit-animation-delay: 0.78s;
        }

        .loading_type2 span:nth-child(7) {
            bottom: 10px;
            left: 50%;
            margin-left: -15px;
            -webkit-transform: rotate(270deg);
            -webkit-animation-delay: 0.91s;
        }

        .loading_type2 span:nth-child(8) {
            bottom: 20px;
            left: 10px;
            -webkit-transform: rotate(315deg);
            -webkit-animation-delay: 1.04s;
        }

        /*loading_type3*/
        .loading_type3 {
            width: 100px;
            height: 100px;
            position: relative;
            margin: 0 auto;
            margin-top: 100px;
            overflow: hidden;
        }

        .loading_type3 .loading {
            font-size: 10px;
            position: relative;
            text-indent: -9999px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: #90EE90;
            background: -moz-linear-gradient(left, #90EE90 10%, rgba(255, 255, 255, 0) 42%);
            background: -webkit-linear-gradient(left, #90EE90 10%, rgba(255, 255, 255, 0) 42%);
            background: -o-linear-gradient(left, #90EE90 10%, rgba(255, 255, 255, 0) 42%);
            background: -ms-linear-gradient(left, #90EE90 10%, rgba(255, 255, 255, 0) 42%);
            background: linear-gradient(to right, #90EE90 10%, rgba(255, 255, 255, 0) 42%);
            -webkit-animation: load_3 1.4s infinite linear;
            animation: load_3 1.4s infinite linear;
            -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
            transform: translateZ(0);
        }

        .loading_type3 .loading:before {
            width: 50%;
            height: 50%;
            background: #90EE90;
            border-radius: 100% 0 0 0;
            position: absolute;
            top: 0;
            left: 0;
            content: \'\';
        }

        .loading_type3 .loading:after {
            background: #ffffff;
            width: 75%;
            height: 75%;
            border-radius: 50%;
            content: \'\';
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

        @-webkit-keyframes load_3 {可以直接拿来用的15个jQuery代码片段
 几个可以直接拿来用的jQuery代码片段
 几个可以直接拿来用的jQuery代码片段
 开源共享拿来即用的C语言字符串函数库
 拿来即用的 Python 时间范围判断方法
 拿来即用的 Python 时间范围判断方法