当前位置：Gxlcms > css > 常见的几种loding效果实现

常见的几种loding效果实现

时间：2021-07-01 10:21:17 帮助过：33人阅读

这次我们来说一下常见的几种loding效果实现，loding效果实现需要注意哪几点，下面就是实战案例，一起来看一下。

  1. <html>
  2.        <head>
  3.               <meta charset="UTF-8">
  4.               <title>Loading</title>
  5.               <link rel="stylesheet" type="text/css" href="loading.css">
  6.               <style>
  7.                      .loader {
  8.                             float: left;
  9.                      }
  10.                     
  11.                      .loader {
  12.                             position: relative;
  13.                             width: 5rem;
  14.                             height: 5rem;
  15.                      }
  16.                     
  17.                      .loader.small {
  18.                             -webkit-transform: scale(.5);
  19.                             transform: scale(.5);
  20.                      }
  21.                     
  22.                      .loader.circle-line,
  23.                      .loader.circle-round {
  24.                             height: 5rem;
  25.                      }
  26.                      /*circle-line*/
  27.                     
  28.                      .loader.circle-line span {
  29.                             position: absolute;
  30.                             display: inline-block;
  31.                             width: 1.5rem;
  32.                             height: .5rem;
  33.                             border-top-left-radius: .25rem;
  34.                             border-bottom-left-radius: .25rem;
  35.                             background: #1ABC9C;
  36.                             opacity: .05;
  37.                             -webkit-animation: circle-line 1s ease infinite;
  38.                             animation: circle-line 1s ease infinite;
  39.                      }
  40.                     
  41.                      .loader.circle-line span:nth-child(1) {
  42.                             top: 50%;
  43.                             left: 0;
  44.                             margin-top: -.25rem;
  45.                             -webkit-animation-delay: .13s;
  46.                             animation-delay: .13s;
  47.                      }
  48.                     
  49.                      .loader.circle-line span:nth-child(2) {
  50.                             top: 1rem;
  51.                             left: .5rem;
  52.                             -webkit-transform: rotate(45deg);
  53.                             transform: rotate(45deg);
  54.                             -webkit-animation-delay: .26s;
  55.                             animation-delay: .26s;
  56.                      }
  57.                     
  58.                      .loader.circle-line span:nth-child(3) {
  59.                             left: 50%;
  60.                             top: .5rem;
  61.                             margin-left: -.75rem;
  62.                             -webkit-transform: rotate(90deg);
  63.                             transform: rotate(90deg);
  64.                             -webkit-animation-delay: .39s;
  65.                             animation-delay: .39s;
  66.                      }
  67.                     
  68.                      .loader.circle-line span:nth-child(4) {
  69.                             right: .5rem;
  70.                             top: 1rem;
  71.                             -webkit-transform: rotate(145deg);
  72.                             transform: rotate(145deg);
  73.                             -webkit-animation-delay: .52s;
  74.                             animation-delay: .52s;
  75.                      }
  76.                     
  77.                      .loader.circle-line span:nth-child(5) {
  78.                             left: 3.5rem;
  79.                             top: 50%;
  80.                             margin-top: -.25rem;
  81.                             -webkit-transform: rotate(180deg);
  82.                             transform: rotate(180deg);
  83.                             -webkit-animation-delay: .65s;
  84.                             animation-delay: .65s;
  85.                      }
  86.                     
  87.                      .loader.circle-line span:nth-child(6) {
  88.                             bottom: 1rem;
  89.                             right: .5rem;
  90.                             -webkit-transform: rotate(-145deg);
  91.                             transform: rotate(-145deg);
  92.                             -webkit-animation-delay: .78s;
  93.                             animation-delay: .78s;
  94.                      }
  95.                     
  96.                      .loader.circle-line span:nth-child(7) {
  97.                             left: 50%;
  98.                             bottom: .5rem;
  99.                             margin-left: -15px;
  100.                             -webkit-transform: rotate(-90deg);
  101.                             transform: rotate(-90deg);
  102.                             -webkit-animation-delay: .91s;
  103.                             animation-delay: .91s;
  104.                      }
  105.                     
  106.                      .loader.circle-line span:nth-child(8) {
  107.                             bottom: 1rem;
  108.                             left: .5rem;
  109.                             -webkit-transform: rotate(-45deg);
  110.                             transform: rotate(-45deg);
  111.                             -webkit-animation-delay: 1.04s;
  112.                             animation-delay: 1.04s;
  113.                      }
  114.                     
  115.                      @keyframes circle-line {
  116.                             0% {
  117.                                    opacity: .05;
  118.                             }
  119.                             100% {
  120.                                    opacity: .7;
  121.                             }
  122.                      }
  123.                     
  124.                      @-webkit-keyframes circle-line {
  125.                             0% {
  126.                                    opacity: .05;
  127.                             }
  128.                             100% {
  129.                                    opacity: .7;
  130.                             }
  131.                      }
  132.                      /*circle-line-spin*/
  133.                     
  134.                      .loader.circle-line-spin .circle-line-inner {
  135.                             width: 100%;
  136.                             height: 100%;
  137.                             -webkit-animation: circle-line-spin 1.5s linear infinite;
  138.                             animation: circle-line-spin 1.5s linear infinite;
  139.                      }
  140.                     
  141.                      .loader.circle-line-spin span {
  142.                             position: absolute;
  143.                             display: inline-block;
  144.                             width: 1.5rem;
  145.                             height: .5rem;
  146.                             border-top-left-radius: .25rem;
  147.                             border-bottom-left-radius: .25rem;
  148.                             background: #1ABC9C;
  149.                             opacity: .7;
  150.                      }
  151.                     
  152.                      .loader.circle-line-spin span:nth-child(1) {
  153.                             top: 50%;
  154.                             left: 0;
  155.                             margin-top: -.25rem;
  156.                      }
  157.                     
  158.                      .loader.circle-line-spin span:nth-child(2) {
  159.                             top: 1rem;
  160.                             left: .5rem;
  161.                             -webkit-transform: rotate(45deg);
  162.                             transform: rotate(45deg);
  163.                      }
  164.                     
  165.                      .loader.circle-line-spin span:nth-child(3) {
  166.                             left: 50%;
  167.                             top: .5rem;
  168.                             margin-left: -.75rem;
  169.                             -webkit-transform: rotate(90deg);
  170.                             transform: rotate(90deg);
  171.                      }
  172.                     
  173.                      .loader.circle-line-spin span:nth-child(4) {
  174.                             right: .5rem;
  175.                             top: 1rem;
  176.                             -webkit-transform: rotate(145deg);
  177.                             transform: rotate(145deg);
  178.                      }
  179.                     
  180.                      .loader.circle-line-spin span:nth-child(5) {
  181.                             left: 3.5rem;
  182.                             top: 50%;
  183.                             margin-top: -.25rem;
  184.                             -webkit-transform: rotate(180deg);
  185.                             transform: rotate(180deg);
  186.                      }
  187.                     
  188.                      .loader.circle-line-spin span:nth-child(6) {
  189.                             bottom: 1rem;
  190.                             right: .5rem;
  191.                             -webkit-transform: rotate(-145deg);
  192.                             transform: rotate(-145deg);
  193.                      }
  194.                     
  195.                      .loader.circle-line-spin span:nth-child(7) {
  196.                             left: 50%;
  197.                             bottom: .5rem;
  198.                             margin-left: -15px;
  199.                             -webkit-transform: rotate(-90deg);
  200.                             transform: rotate(-90deg);
  201.                      }
  202.                     
  203.                      .loader.circle-line-spin span:nth-child(8) {
  204.                             bottom: 1rem;
  205.                             left: .5rem;
  206.                             -webkit-transform: rotate(-45deg);
  207.                             transform: rotate(-45deg);
  208.                      }
  209.                     
  210.                      @keyframes circle-line-spin {
  211.                             0% {
  212.                                    transform: rotate(0);
  213.                             }
  214.                             100% {
  215.                                    transform: rotate(360deg);
  216.                             }
  217.                      }
  218.                     
  219.                      @-webkit-keyframes circle-line-spin {
  220.                             0% {
  221.                                    -webkit-transform: rotate(0);
  222.                             }
  223.                             100% {
  224.                                    -webkit-transform: rotate(360deg);
  225.                             }
  226.                      }
  227.                      /*circle-round*/
  228.                     
  229.                      .loader.circle-round span {
  230.                             opacity: .05;
  231.                             -webkit-animation: circle-round 1s ease infinite;
  232.                             animation: circle-round 1s ease infinite;
  233.                      }
  234.                     
  235.                      .loader.circle-round-fade span {
  236.                             -webkit-animation: circle-round-fade 1s ease infinite;
  237.                             animation: circle-round-fade 1s ease infinite;
  238.                      }
  239.                     
  240.                      .loader.circle-round span,
  241.                      .loader.circle-round-fade span {
  242.                             position: absolute;
  243.                             width: .8rem;
  244.                             height: .8rem;
  245.                             display: inline-block;
  246.                             border-radius: 50%;
  247.                             background: #1ABC9C;
  248.                      }
  249.                     
  250.                      .loader.circle-round span:nth-child(1),
  251.                      .loader.circle-round-fade span:nth-child(1) {
  252.                             top: 50%;
  253.                             left: 0;
  254.                             margin-top: -.4rem;
  255.                             -webkit-animation-delay: -1.04s;
  256.                             animation-delay: -1.04s;
  257.                      }
  258.                     
  259.                      .loader.circle-round span:nth-child(2),
  260.                      .loader.circle-round-fade span:nth-child(2) {
  261.                             top: .7rem;
  262.                             left: .7rem;
  263.                             -webkit-animation-delay: -.91s;
  264.                             animation-delay: -.91s;
  265.                      }
  266.                     
  267.                      .loader.circle-round span:nth-child(3),
  268.                      .loader.circle-round-fade span:nth-child(3) {
  269.                             top: 0;
  270.                             left: 50%;
  271.                             margin-left: -.4rem;
  272.                             -webkit-animation-delay: -.78s;
  273.                             animation-delay: -.78s;
  274.                      }
  275.                     
  276.                      .loader.circle-round span:nth-child(4),
  277.                      .loader.circle-round-fade span:nth-child(4) {
  278.                             right: .7rem;
  279.                             top: .7rem;
  280.                             -webkit-animation-delay: -.65s;
  281.                             animation-delay: -.65s;
  282.                      }
  283.                     
  284.                      .loader.circle-round span:nth-child(5),
  285.                      .loader.circle-round-fade span:nth-child(5) {
  286.                             right: 0;
  287.                             top: 50%;
  288.                             margin-top: -.4rem;
  289.                             -webkit-animation-delay: -.52s;
  290.                             animation-delay: -.52s;
  291.                      }
  292.                     
  293.                      .loader.circle-round span:nth-child(6),
  294.                      .loader.circle-round-fade span:nth-child(6) {
  295.                             bottom: .7rem;
  296.                             right: .7rem;
  297.                             -webkit-animation-delay: -.39s;
  298.                             animation-delay: -.39s;
  299.                      }
  300.                     
  301.                      .loader.circle-round span:nth-child(7),
  302.                      .loader.circle-round-fade span:nth-child(7) {
  303.                             bottom: 0;
  304.                             left: 50%;
  305.                             margin-left: -.4rem;
  306.                             -webkit-animation-delay: -.26s;
  307.                             animation-delay: -.26s;
  308.                      }
  309.                     
  310.                      .loader.circle-round span:nth-child(8),
  311.                      .loader.circle-round-fade span:nth-child(8) {
  312.                             left: .7rem;
  313.                             bottom: .7rem;
  314.                             -webkit-animation-delay: -.13s;
  315.                             animation-delay: -.13s;
  316.                      }
  317.                     
  318.                      @keyframes circle-round {
  319.                             0% {
  320.                                    opacity: .05;
  321.                             }
  322.                             100% {
  323.                                    opacity: .7;
  324.                             }
  325.                      }
  326.                     
  327.                      @-webkit-keyframes circle-round {
  328.                             0% {
  329.                                    opacity: .05;
  330.                             }
  331.                             100% {
  332.                                    opacity: .7;
  333.                             }
  334.                      }
  335.                     
  336.                      @keyframes circle-round-fade {
  337.                             0% {
  338.                                    opacity: .25;
  339.                                    transform: scale(.2);
  340.                             }
  341.                             100% {
  342.                                    opacity: 1;
  343.                                    transform: scale(1);
  344.                             }
  345.                      }
  346.                     
  347.                      @-webkit-keyframes circle-round-fade {
  348.                             0% {
  349.                                    opacity: .25;
  350.                                    transform: scale(.2);
  351.                             }
  352.                             100% {
  353.                                    opacity: 1;
  354.                                    transform: scale(1);
  355.                             }
  356.                      }
  357.                      /*line-square*/
  358.                     
  359.                      .loader.line-square {
  360.                             width: 6rem;
  361.                             height: .8rem;
  362.                      }
  363.                     
  364.                      .loader.line-square span {
  365.                             position: absolute;
  366.                             top: 0;
  367.                             width: .8rem;
  368.                             height: .8rem;
  369.                             display: inline-block;
  370.                             background: #1ABC9C;
  371.                             -webkit-animation: line-square 1s ease infinite;
  372.                             animation: line-square 1s ease infinite;
  373.                      }
  374.                     
  375.                      .loader.line-square span:nth-child(1) {
  376.                             left: 0;
  377.                             -webkit-animation-delay: .13s;
  378.                             animation-delay: .13s;
  379.                      }
  380.                     
  381.                      .loader.line-square span:nth-child(2) {
  382.                             left: 1.3rem;
  383.                             -webkit-animation-delay: .26s;
  384.                             animation-delay: .26s;
  385.                      }
  386.                     
  387.                      .loader.line-square span:nth-child(3) {
  388.                             left: 2.6rem;
  389.                             -webkit-animation-delay: .39s;
  390.                             animation-delay: .39s;
  391.                      }
  392.                     
  393.                      .loader.line-square span:nth-child(4) {
  394.                             left: 3.9rem;
  395.                             -webkit-animation-delay: .52s;
  396.                             animation-delay: .52s;
  397.                      }
  398.                     
  399.                      .loader.line-square span:nth-child(5) {
  400.                             left: 5.2rem;
  401.                             -webkit-animation-delay: .65s;
  402.                             animation-delay: .65s;
  403.                      }
  404.                     
  405.                      @keyframes line-square {
  406.                             0% {
  407.                                    opacity: 1;
  408.                                    transform: scale(1.2);
  409.                                    -webkit-transform: scale(1.2);
  410.                             }
  411.                             100% {
  412.                                    opacity: .2;
  413.                                    transform: scale(.2);
  414.                                    -webkit-transform: scale(.2);
  415.                             }
  416.                      }
  417.                     
  418.                      @-webkit-keyframes line-square {
  419.                             0% {
  420.                                    opacity: 1;
  421.                                    transform: scale(1.2);
  422.                                    -webkit-transform: scale(1.2);
  423.                             }
  424.                             100% {
  425.                                    opacity: .2;
  426.                                    transform: scale(.2);
  427.                                    -webkit-transform: scale(.2);
  428.                             }
  429.                      }
  430.                      /*line-round*/
  431.                     
  432.                      .loader.line-round {
  433.                             width: 6rem;
  434.                             height: .8rem;
  435.                      }
  436.                     
  437.                      .loader.line-round span {
  438.                             position: absolute;
  439.                             top: 0;
  440.                             width: .8rem;
  441.                             height: .8rem;
  442.                             border-radius: 50%;
  443.                             display: inline-block;
  444.                             background: #1ABC9C;
  445.                             -webkit-animation: line-round 1s ease infinite;
  446.                             animation: line-round 1s ease infinite;
  447.                      }
  448.                     
  449.                      .loader.line-round span:nth-child(1) {
  450.                             left: 0;
  451.                             -webkit-animation-delay: .13s;
  452.                             animation-delay: .13s;
  453.                      }
  454.                     
  455.                      .loader.line-round span:nth-child(2) {
  456.                             left: 1.3rem;
  457.                             -webkit-animation-delay: .26s;
  458.                             animation-delay: .26s;
  459.                      }
  460.                     
  461.                      .loader.line-round span:nth-child(3) {
  462.                             left: 2.6rem;
  463.                             -webkit-animation-delay: .39s;
  464.                             animation-delay: .39s;
  465.                      }
  466.                     
  467.                      .loader.line-round span:nth-child(4) {
  468.                             left: 3.9rem;
  469.                             -webkit-animation-delay: .52s;
  470.                             animation-delay: .52s;
  471.                      }
  472.                     
  473.                      .loader.line-round span:nth-child(5) {
  474.                             left: 5.2rem;
  475.                             -webkit-animation-delay: .65s;
  476.                             animation-delay: .65s;
  477.                      }
  478.                     
  479.                      @keyframes line-round {
  480.                             0% {
  481.                                    opacity: 1;
  482.                                    transform: scale(1.2);
  483.                                    -webkit-transform: scale(1.2);
  484.                             }
  485.                             100% {
  486.                                    opacity: .2;
  487.                                    transform: scale(.2);
  488.                                    -webkit-transform: scale(.2);
  489.                             }
  490.                      }
  491.                     
  492.                      @-webkit-keyframes line-round {
  493.                             0% {
  494.                                    opacity: 1;
  495.                                    transform: scale(1.2);
  496.                                    -webkit-transform: scale(1.2);
  497.                             }
  498.                             100% {
  499.                                    opacity: .2;
  500.                                    transform: scale(.2);
  501.                                    -webkit-transform: scale(.2);
  502.                             }
  503.                      }
  504.                      /*line-bounce*/
  505.                     
  506.                      .loader.line-bounce {
  507.                             width: 6rem;
  508.                             height: 2.5rem;
  509.                      }
  510.                     
  511.                      .loader.line-bounce span {
  512.                             position: absolute;
  513.                             top: 0;
  514.                             width: .5rem;
  515.                             height: 2.5rem;
  516.                             border-radius: 5px;
  517.                             display: inline-block;
  518.                             background: #1ABC9C;
  519.                             -webkit-animation: line-bounce 1s ease infinite;
  520.                             animation: line-bounce 1s ease infinite;
  521.                      }
  522.                     
  523.                      .loader.line-bounce span:nth-child(1) {
  524.                             left: 0;
  525.                             -webkit-animation-delay: -.65s;
  526.                             animation-delay: -.65s;
  527.                      }
  528.                     
  529.                      .loader.line-bounce span:nth-child(2) {
  530.                             left: 1.3rem;
  531.                             -webkit-animation-delay: -.78s;
  532.                             animation-delay: -.78s;
  533.                      }
  534.                     
  535.                      .loader.line-bounce span:nth-child(3) {
  536.                             left: 2.6rem;
  537.                             -webkit-animation-delay: -.91s;
  538.                             animation-delay: -.91s;
  539.                      }
  540.                     
  541.                      .loader.line-bounce span:nth-child(4) {
  542.                             left: 3.9rem;
  543.                             -webkit-animation-delay: -.78s;
  544.                             animation-delay: -78s;
  545.                      }
  546.                     
  547.                      .loader.line-bounce span:nth-child(5) {
  548.                             left: 5.2rem;
  549.                             -webkit-animation-delay: -.65s;
  550.                             animation-delay: -.65s;
  551.                      }
  552.                     
  553.                      @keyframes line-bounce {
  554.                             0% {
  555.                                    transform: scaleY(1);
  556.                             }
  557.                             50% {
  558.                                    transform: scaleY(.3);
  559.                             }
  560.                             100% {
  561.                                    transform: scaleY(1);
  562.                             }
  563.                      }
  564.                     
  565.                      @-webkit-keyframes line-bounce {
  566.                             0% {
  567.                                    -webkit-transform: scaleY(1);
  568.                             }
  569.                             50% {
  570.                                    -webkit-transform: scaleY(.3);
  571.                             }
  572.                             100% {
  573.                                    -webkit-transform: scaleY(1);
  574.                             }
  575.                      }
  576.                      /*circle-spin*/
  577.                     
  578.                      .loader.circle-spin {
  579.                             border-radius: 50%;
  580.                             border: .2rem solid rgba(0, 0, 0, .05);
  581.                             width: 4rem;
  582.                             height: 4rem;
  583.                             box-sizing: content-box;
  584.                      }
  585.                     
  586.                      .loader.circle-spin .loader-placeholder {
  587.                             position: absolute;
  588.                             top: -.2rem;
  589.                             left: -.2rem;
  590.                             border-radius: 50%;
  591.                             border: .2rem solid transparent;
  592.                             border-top: .2rem solid #1ABC9C;
  593.                             width: 4rem;
  594.                             height: 4rem;
  595.                             box-sizing: content-box;
  596.                             -webkit-animation: circle-spin 1s ease infinite;
  597.                             animation: circle-spin 1s ease infinite;
  598.                      }
  599.                     
  600.                      @keyframes circle-spin {
  601.                             0% {
  602.                                    transform: rotate(0);
  603.                             }
  604.                             100% {
  605.                                    transform: rotate(360deg);
  606.                             }
  607.                      }
  608.                     
  609.                      @-webkit-keyframes circle-spin {
  610.                             0% {
  611.                                    -webkit-transform: rotate(0);
  612.                             }
  613.                             100% {
  614.                                    -webkit-transform: rotate(360deg);
  615.                             }
  616.                      }
  617.               </style>
  618.        </head>
  619.  
  620.        <body>
  621.               <div>
  622.                      <div class="loader circle-line small">
  623.                             <span></span>
  624.                             <span></span>
  625.                             <span></span>
  626.                             <span></span>
  627.                             <span></span>
  628.                             <span></span>
  629.                             <span></span>
  630.                             <span></span>
  631.                      </div>
  632.                      <div class="loader circle-line-spin small">
  633.                             <div>
  634.                                    <span></span>
  635.                                    <span></span>
  636.                                    <span></span>
  637.                                    <span></span>
  638.                                    <span></span>
  639.                                    <span></span>
  640.                                    <span></span>
  641.                                    <span></span>
  642.                             </div>
  643.                      </div>
  644.                      <div class="loader circle-round small">
  645.                             <span></span>
  646.                             <span></span>
  647.                             <span></span>
  648.                             <span></span>
  649.                             <span></span>
  650.                             <span></span>
  651.                             <span></span>
  652.                             <span></span>
  653.                      </div>
  654.                      <div class="loader circle-round-fade small">
  655.                             <span></span>
  656.                             <span></span>
  657.                             <span></span>
  658.                             <span></span>
  659.                             <span></span>
  660.                             <span></span>
  661.                             <span></span>
  662.                             <span></span>
  663.                      </div>
  664.                      <div class="loader line-square small">
  665.                             <span></span>
  666.                             <span></span>
  667.                             <span></span>
  668.                             <span></span>
  669.                             <span></span>
  670.                      </div>
  671.                      <div class="loader line-round small">
  672.                             <span></span>
  673.                             <span></span>
  674.                             <span></span>
  675.                             <span></span>
  676.                             <span></span>
  677.                      </div>
  678.                      <div class="loader line-bounce small">
  679.                             <span></span>
  680.                             <span></span>
  681.                             <span></span>
  682.                             <span></span>
  683.                             <span></span>
  684.                      </div>
  685.                      <div class="loader circle-spin small">
  686.                             <div></div>
  687.                      </div>
  688.               </div>
  689.  
  690.        </body>
  691. </html>


相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

相关阅读：

HTML5响应式banner制作教程

用H5制作水滴特效教程

HTML网页优化压缩的实现步骤

以上就是常见的几种loding效果实现的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！