Share a pure CSS animation, when the page (mobile phone) loading, etc. can be referenced!

The CSS code is as follows:

/* Custom Stylesheet */body, html {margin:0;      -webkit-font-smoothing:antialiased;      Background: #68ABAD;  Text-align:center;    }/* DEMO 1 */. loader1 {margin:0 auto;    height:20px;    width:20px;    position:relative;    -webkit-animation:spin 1.5s linear Infinite;  -moz-animation:spin 1.5s linear Infinite;    }. loader1 i{height:20px;    width:20px;    border-radius:25px;    Display:block;  Position:absolute;  }. Loader1 i:before,. Loader1 i:after{content: ';  Display:block;  Position:absolute;  Height:inherit;  Width:inherit;  Border-radius:inherit;    }. Loader1 I:first-child:before {Background:rgba (52, 149, 221, 0.9);    -webkit-animation:rotate-top-left 1.5s linear Infinite;  -moz-animation:rotate-top-left 1.5s linear Infinite;    }. Loader1 I:first-child:after {Background:rgba (225, 73, 44, 0.9);    -webkit-animation:rotate-top-right 1.5s linear Infinite;  -moz-animation:rotate-top-right 1.5s linear Infinite; }. Loader1 I:Last-child:before {Background:rgba (249, 206, 43, 0.9);    -webkit-animation:rotate-bottom-left 1.5s linear Infinite;  -moz-animation:rotate-bottom-left 1.5s linear Infinite;    }. Loader1 I:last-child:after {Background:rgba (0, 153, 117, 0.9);    -webkit-animation:rotate-bottom-right 1.5s linear Infinite;  -moz-animation:rotate-bottom-right 1.5s linear Infinite;    } @-webkit-keyframes spin{0%{-webkit-transform:rotate (0deg);    } 50%{-webkit-transform:rotate ( -180deg);    } 100%{-webkit-transform:rotate ( -360deg);    }} @-webkit-keyframes rotate-top-right{0%{-webkit-transform:rotate (0deg);      } 50%{-webkit-transform:rotate ( -180deg);    -webkit-transform-origin:20% 20%;    } 100%{-webkit-transform:rotate ( -360deg);    }} @-webkit-keyframes rotate-top-left{0%{-webkit-transform:rotate (0deg);      } 50%{-webkit-transform:rotate (180deg);    -webkit-transform-origin:80% 20%; } 100%{-webkit-Transform:rotate (360DEG);    }} @-webkit-keyframes rotate-bottom-right{0%{-webkit-transform:rotate (0deg);      } 50%{-webkit-transform:rotate ( -180deg);    -webkit-transform-origin:80% 80%;    } 100%{-webkit-transform:rotate ( -360deg);    }} @-webkit-keyframes rotate-bottom-left{0%{-webkit-transform:rotate (0deg);      } 50%{-webkit-transform:rotate (180deg);    -webkit-transform-origin:20% 80%;    } 100%{-webkit-transform:rotate (360deg);    }} @-moz-keyframes spin{0%{-moz-transform:rotate (0deg);    } 50%{-moz-transform:rotate ( -180deg);    } 100%{-moz-transform:rotate ( -360deg);    }} @-moz-keyframes rotate-top-right{0%{-moz-transform:rotate (0deg);      } 50%{-moz-transform:rotate ( -180deg);    -moz-transform-origin:20% 20%;    } 100%{-moz-transform:rotate ( -360deg);    }} @-moz-keyframes rotate-top-left{0%{-moz-transform:rotate (0deg);     } 50%{ -moz-transform:rotate (180DEG);    -moz-transform-origin:80% 20%;    } 100%{-moz-transform:rotate (360deg);    }} @-moz-keyframes rotate-bottom-right{0%{-moz-transform:rotate (0deg);      } 50%{-moz-transform:rotate ( -180deg);    -moz-transform-origin:80% 80%;    } 100%{-moz-transform:rotate ( -360deg);    }} @-moz-keyframes rotate-bottom-left{0%{-moz-transform:rotate (0deg);      } 50%{-moz-transform:rotate (180deg);    -moz-transform-origin:20% 80%;    } 100%{-moz-transform:rotate (360deg);    }}/* DEMO 2 */.loader2 {margin:0 auto;    position:relative;    width:100px;  height:100px;    }. loader2 I {border-style:solid;    Display:inline-block;    Box-sizing:border-box;    -moz-box-sizing:border-box;    border-width:50px;    Border-color:rgba (255,255,255,1);    border-radius:50px;    -moz-animation:blink 1.5s Infinite ease-in-out;    -webkit-animation:blink 1.5s Infinite ease-in-out; height:100px;    width:100px;      } @-webkit-keyframes blink{50%{border-width:0;    Border-color:rgba (255,255,255,0.5);      } 100%{border-width:0;    Border-color:rgba (255,255,255,0.5);      }} @-moz-keyframes blink{50%{border-width:0;    Border-color:rgba (255,255,255,0.5);      } 100%{border-width:0;    Border-color:rgba (255,255,255,0.5);    }}/* DEMO 3 */.loader3 {margin:0 auto;    position:relative;    width:50px;    height:50px;    -webkit-animation:spin 4s infinite ease;  -moz-animation:spin 4s infinite ease;    }. loader3 I {border-style:solid;    Display:inline-block;    Box-sizing:border-box;    -moz-box-sizing:border-box;    border:2px dashed Rgba (0,0,0,0.7);    border-radius:50px;    -webkit-animation:scale 4s infinite linear;    -moz-animation:scale 4s infinite linear;    height:50px;  width:50px;    } @-webkit-keyframes spin{0%{-webkit-transform:rotate (0deg);    } 25%{-webkit-transform:rotate (90deg); }    50%{-webkit-transform:rotate ( -90DEG);    } 75%{-webkit-transform:rotate (180deg);    } 100%{-webkit-transform:rotate ( -180deg);    }} @-webkit-keyframes scale{0%{-webkit-transform:scale (1);    } 25%{-webkit-transform:scale (0.5);    } 50%{-webkit-transform:scale (1);    } 75%{-webkit-transform:scale (0.5);    } 100%{-webkit-transform:scale (1);    }} @-moz-keyframes spin{0%{-moz-transform:rotate (0deg);    } 25%{-moz-transform:rotate (90deg);    } 50%{-moz-transform:rotate ( -90deg);    } 75%{-moz-transform:rotate (180deg);    } 100%{-moz-transform:rotate ( -180deg);    }} @-moz-keyframes scale{0%{-moz-transform:scale (1);    } 25%{-moz-transform:scale (0.5);    } 50%{-moz-transform:scale (1);    } 75%{-moz-transform:scale (0.5);    } 100%{-moz-transform:scale (1);    }}/* DEMO 4 */.loader4 {margin:0 auto; Position:relative    Text-align:center;    border-bottom:70px solid Rgba (255,255,255,0.5);    border-left:10px solid Transparent;    border-right:10px solid Transparent;    height:0;    width:20px}. loader4:before{content: ';    Top: -15px;    Left: -28px;    Display:block;    Position:absolute;    height:70px;    width:70px;    border-radius:50px;    border:5px dashed Rgba (255,255,255,0.5);    -webkit-animation:wind. 25s linear infinite;  -moz-animation:wind. 25s linear infinite;    }. loader4 i{height:40px;    width:5px;    Margin-left: -1.5px;    Display:inline-block;    Position:absolute;    -webkit-animation:spin 1.5s linear Infinite;  -moz-animation:spin 1.5s linear Infinite;      }. Loader4 i:before,. Loader4 i:after{content: ';      Display:block;      Position:absolute;      Height:inherit;      Width:inherit;      Border-radius:inherit;  Background:white;    }. loader4 I:first-child:before {top:-53%;    -webkit-transform:rotate ( -45DEG); -webkit-transform-origin:100% 100%;    -moz-transform:rotate ( -45DEG);  -moz-transform-origin:100% 100%;    }. loader4 I:first-child:after {top:-53%;    -webkit-transform-origin:0 100%;    -webkit-transform:rotate (45DEG);    -moz-transform-origin:0 100%;  -moz-transform:rotate (45DEG);    }. loader4 I:last-child:before {top:45%;    -webkit-transform-origin:100% 0;    -webkit-transform:rotate ( -45DEG);    -moz-transform-origin:100% 0;  -moz-transform:rotate ( -45DEG);    }. loader4 I:last-child:after {-webkit-transform-origin:0 0;    -webkit-transform:rotate (45DEG);    -moz-transform-origin:0 0;    -moz-transform:rotate (45DEG);  top:45%;    } @-webkit-keyframes spin{0%{-webkit-transform:rotate (0deg);    } 50%{-webkit-transform:rotate ( -180deg);    } 100%{-webkit-transform:rotate ( -360deg);      }} @-webkit-keyframes wind{100%{-webkit-transform:scale (2);    border-width:0; }} @-moz-keyframes spin{0%{-moz-transform:rotate(0DEG);    } 50%{-moz-transform:rotate ( -180deg);    } 100%{-moz-transform:rotate ( -360deg);      }} @-moz-keyframes wind{100%{-moz-transform:scale (2);    border-width:0;    }}/* DEMO 5 */.solar {margin:250px auto 350px;    height:50px;    width:50px;    Background:orange;    border-radius:25px;    position:relative;    -webkit-animation:glow 1.5s linear Infinite;  -moz-animation:glow 1.5s linear Infinite;    }. Solar i{border-radius:250px;    Display:block;    Position:absolute;    border:1px Solid Rgba (255,255,255, 0.15);    Box-sizing:border-box;    -moz-box-sizing:border-box;    -webkit-transform-origin:50% 50%;  -moz-transform-origin:50% 50%;    }. Solar I:before {content: ';    border-radius:25px;    Background:black;    Display:block;    Position:absolute;    Top: -5px;  right:45%;    }. Solar I.mercury {width:80px;    height:80px;    Margin-left: -40px;    left:50%;    top:50%;    Margin-top: -40px; -webkiT-animation:orbit. 5s linear infinite;  -moz-animation:orbit. 5s linear infinite;    }. Solar I.mercury:before {background: #6F5F5F;    height:7px;  width:7px;    }. Solar I.venus {width:110px;    height:110px;    Margin-left: -55px;    left:50%;    top:50%;    Margin-top: -55px;    -webkit-animation:orbit 1s linear infinite;  -moz-animation:orbit 1s linear infinite;    }. Solar I.venus:before {background: #E7A71F;    height:10px;  width:10px;    }. Solar I.earth {width:140px;    height:140px;    Margin-left: -70px;    left:50%;    top:50%;    Margin-top: -70px;    -webkit-animation:orbit 1.5s linear Infinite;  -moz-animation:orbit 1.5s linear Infinite;    }. Solar I.earth:before {background: #63BEE2;    height:10px;  width:10px;    }. Solar I.mars {width:170px;    height:170px;    Margin-left: -85px;    left:50%;    top:50%;    Margin-top: -85px;    -webkit-animation:orbit 2s linear infinite;  -moz-animation:orbit 2s linear infinite;}. Solar I.mars:before {background:red;    height:10px;  width:10px;    }. Solar I.belt {box-sizing:border-box;    -moz-box-sizing:border-box;    border-width:25px;    width:240px;    height:240px;    Margin-left: -120px;    Border-color:rgba (36, 35, 35, 0.21);    left:50%;    top:50%;  Margin-top: -120px;    }. Solar I.jupiter {width:260px;    height:260px;    Margin-left: -130px;    left:50%;    top:50%;    Margin-top: -130px;    -webkit-animation:orbit 2.5s linear Infinite;  -moz-animation:orbit 2.5s linear Infinite;    }. Solar I.jupiter:before {background: #CF9B2B;    Top: -15px;    height:30px;  width:30px;    }. Solar I.saturn {width:320px;    height:320px;    Margin-left: -160px;    left:50%;    top:50%;    Margin-top: -160px;    -webkit-animation:orbit 3s linear infinite;  -moz-animation:orbit 3s linear infinite;    }. Solar I.saturn:before {background: #CF7A2B;    Top: -10px;    height:20px;  width:20px; }. Solar I.satuRn:after {background: #fff;    width:30px;    height:1px;    Content: ";    Position:absolute;    Display:block;    Background: #FFF;    width:30px;    height:1px;    Content: ";    right:43.5%;    -webkit-transform:rotate (20DEG);  -moz-transform:rotate (20DEG);    }. Solar I.uranus {width:360px;    height:360px;    Margin-left: -180px;    left:50%;    top:50%;    Margin-top: -180px;    -webkit-animation:orbit 3.5s linear Infinite;  -moz-animation:orbit 3.5s linear Infinite;    }. Solar I.uranus:before {background: #10C593;    Top: -8px;    height:15px;  width:15px;    }. Solar I.neptune {width:400px;    height:400px;    Margin-left: -200px;    left:50%;    top:50%;    Margin-top: -200px;    -webkit-animation:orbit 4s linear infinite;  -moz-animation:orbit 4s linear infinite;    }. Solar I.neptune:before {background: #1470E4;    Top: -8px;    height:15px;  width:15px; } @-webkit-keyframes orbit{0%{-webkit-transform:rotate (0deg);    } 50%{-webkit-transform:rotate ( -180deg);    } 100%{-webkit-transform:rotate ( -360deg);    }} @-webkit-keyframes glow{0%{box-shadow:none;      } 50%{background: #FFEB00;    box-shadow:0 0 20px Orange;    } 100%{Box-shadow:none;    }} @-moz-keyframes orbit{0%{-moz-transform:rotate (0deg);    } 50%{-moz-transform:rotate ( -180deg);    } 100%{-moz-transform:rotate ( -360deg);    }} @-moz-keyframes glow{0%{box-shadow:none;      } 50%{background: #FFEB00;    box-shadow:0 0 20px Orange;    } 100%{Box-shadow:none; }  }

The effect seems to be that blogs can't cite jsfiddle

View Demo