使用CSS制作Loading加载Icon

来源：互联网发布：核聚变不能实现知乎编辑：程序博客网时间：2024/05/21 10:29

效果图：

代码：

<!DOCTYPE html><html><head><meta charset="utf-8"><link rel="stylesheet" href="./CSS Only Loading Spinners_files/core.css"></head><body><section class="container"><div class="aligncenter"><h2>Loading Bars</h2><div class="loading bar"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><h2>Bar Spinner</h2><div class="spinner bar"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><h2>Circle Spinner</h2><div class="spinner circles"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><h2>Facebook Loader</h2><div class="facebook"><div></div><div></div><div></div></div>        <h2>Spinning Square</h2>        <div class="spinning-square"></div>        <h2>Spinner Bounce Circle</h2>        <div class="spinner-bounce-circle">            <div></div>            <div></div>        </div>        <h2>Wave Spinner</h2>        <div class="spinner-wave">            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>        </div>        <h2>Rotating Cube</h2>        <div class="spinner-cube">            <div></div>            <div></div>        </div></div></body></html>

body, h2, h3{font-family: 'Ubuntu ', serif;color:#444;font-size:1.6em;background: #eee;}.ad_container{margin-bottom:20px;height:100px;float:right;}.container{width:90%;margin:30px auto;padding:25px;min-height:400px;height:auto;}.aligncenter{text-align:center;}/* ========================================================== * Loading Bars * ========================================================*/.loading{width:100px;height:100px;margin:30px auto;position:relative;}.loading.bar div{width: 10px;height: 30px;background: black;position: absolute;top: 35px;left: 45px;opacity:0.05;-webkit-animation: fadeit 1.1s linear infinite;animation: fadeit 1.1s linear infinite;}.loading.bar div:nth-child(1){-webkit-transform: rotate(0deg) translate(0, -30px);transform: rotate(0deg) translate(0, -30px);-webkit-animation-delay:0.39s;animation-delay:0.39s;}.loading.bar div:nth-child(2){-webkit-transform: rotate(45deg) translate(0, -30px);transform: rotate(45deg) translate(0, -30px);-webkit-animation-delay:0.52s;animation-delay:0.52s;}.loading.bar div:nth-child(3){-webkit-transform: rotate(90deg) translate(0, -30px);transform: rotate(90deg) translate(0, -30px);-webkit-animation-delay:0.65s;animation-delay:0.65s;}.loading.bar div:nth-child(4){-webkit-transform: rotate(135deg) translate(0, -30px);transform: rotate(135deg) translate(0, -30px);-webkit-animation-delay:0.78s;animation-delay:0.78s;}.loading.bar div:nth-child(5){-webkit-transform: rotate(180deg) translate(0, -30px);transform: rotate(180deg) translate(0, -30px);-webkit-animation-delay:0.91s;animation-delay:0.91s;}.loading.bar div:nth-child(6){-webkit-transform: rotate(225deg) translate(0, -30px);transform: rotate(225deg) translate(0, -30px);-webkit-animation-delay:1.04s;animation-delay:1.04s;}.loading.bar div:nth-child(7){-webkit-transform: rotate(270deg) translate(0, -30px);transform: rotate(270deg) translate(0, -30px);-webkit-animation-delay:1.17s;animation-delay:1.17s;}.loading.bar div:nth-child(8){-webkit-transform: rotate(315deg) translate(0, -30px);transform: rotate(315deg) translate(0, -30px);-webkit-animation-delay:1.3s;animation-delay:1.3s;}@-webkit-keyframes fadeit{0%{ opacity:1; }100%{ opacity:0;}}@keyframes fadeit{0%{ opacity:1; }100%{ opacity:0;}}/* ========================================================== * Spinner * ========================================================*/.spinner{width:100px;height:100px;margin:30px auto;position:relative;  -webkit-animation: rotateit 1.3s linear infinite;  animation: rotateit 1.3s linear infinite;}@-webkit-keyframes rotateit {  from { -webkit-transform: rotate(360deg); }  to { -webkit-transform: rotate(0deg);}}@keyframes rotateit {  from { transform: rotate(360deg);}  to { transform: rotate(0deg); }}/* ================================================ * Bars =================================================*/.spinner.bar div{width: 10px;height: 30px;background: black;position: absolute;top: 35px;left: 45px;}.spinner.bar div:nth-child(1){-webkit-transform: rotate(0deg) translate(0, -30px);transform: rotate(0deg) translate(0, -30px);}.spinner.bar div:nth-child(2){-webkit-transform: rotate(45deg) translate(0, -30px);transform: rotate(45deg) translate(0, -30px);opacity:0.7;}.spinner.bar div:nth-child(3){-webkit-transform: rotate(90deg) translate(0, -30px);transform: rotate(90deg) translate(0, -30px);opacity:0.6;}.spinner.bar div:nth-child(4){-webkit-transform: rotate(135deg) translate(0, -30px);transform: rotate(135deg) translate(0, -30px);opacity:0.5;}.spinner.bar div:nth-child(5){-webkit-transform: rotate(180deg) translate(0, -30px);transform: rotate(180deg) translate(0, -30px);opacity:0.4;}.spinner.bar div:nth-child(6){-webkit-transform: rotate(225deg) translate(0, -30px);transform: rotate(225deg) translate(0, -30px);opacity:0.3;}.spinner.bar div:nth-child(7){-webkit-transform: rotate(270deg) translate(0, -30px);transform: rotate(270deg) translate(0, -30px);opacity:0.2;}.spinner.bar div:nth-child(8){-webkit-transform: rotate(315deg) translate(0, -30px);transform: rotate(315deg) translate(0, -30px);opacity:0.1;}/*======================================================= * Circles =======================================================*/.spinner.circles div{width: 20px;height: 20px;border-radius:50%;background: black;position: absolute;top: 35px;left: 45px;}.spinner.circles div:nth-child(1){-webkit-transform: rotate(0deg) translate(0, -35px) scale(1.4);transform: rotate(0deg) translate(0, -35px) scale(1.4);}.spinner.circles div:nth-child(2){-webkit-transform: rotate(45deg) translate(0, -35px) scale(1.2);transform: rotate(45deg) translate(0, -35px) scale(1.2);opacity:0.7;}.spinner.circles div:nth-child(3){-webkit-transform: rotate(90deg) translate(0, -35px) scale(1.1);transform: rotate(90deg) translate(0, -35px) scale(1.1);opacity:0.6;}.spinner.circles div:nth-child(4){-webkit-transform: rotate(135deg) translate(0, -35px) scale(0.9);transform: rotate(135deg) translate(0, -35px) scale(0.9);opacity:0.5;}.spinner.circles div:nth-child(5){-webkit-transform: rotate(180deg) translate(0, -35px) scale(0.7);transform: rotate(180deg) translate(0, -35px) scale(0.7);opacity:0.4;}.spinner.circles div:nth-child(6){-webkit-transform: rotate(225deg) translate(0, -35px) scale(0.5);transform: rotate(225deg) translate(0, -35px) scale(0.5);opacity:0.3;}.spinner.circles div:nth-child(7){-webkit-transform: rotate(270deg) translate(0, -35px) scale(0.3);transform: rotate(270deg) translate(0, -35px) scale(0.3);opacity:0.2;}.spinner.circles div:nth-child(8){-webkit-transform: rotate(315deg) translate(0, -35px) scale(0.1);transform: rotate(315deg) translate(0, -35px) scale(0.1);opacity:0.1;}/*=========================================================== * Facebook Loader * ========================================================*/.facebook div{height:50px;width:20px;display:inline-block;background-color: #56bbdb;border:1px solid #217c99;-webkit-animation:facebook_loader 1.3s linear infinite;animation:facebook_loader 1.3s linear infinite;-webkit-transform: scale(0.91);transform: scale(0.91);}.facebook div:nth-child(1){-webkit-animation-delay:0.39s;animation-delay:0.39s;}.facebook div:nth-child(2){-webkit-animation-delay:0.52s;animation-delay:0.52s;}.facebook div:nth-child(3){-webkit-animation-delay:0.65s;animation-delay:0.65s;}@-webkit-keyframes facebook_loader{0%{-webkit-transform:scale(1.2);opacity:1}100%{-webkit-transform:scale(0.7);opacity:0.1}}@keyframes facebook_loader{0%{transform:scale(1.2);opacity:1}100%{transform:scale(0.7);opacity:0.1}}/********************************************************************* * Spinning Square *********************************************************************/ .spinning-square {    width: 60px;    height: 60px;    background-color: #333;    margin: 0 auto;    -webkit-animation: rotatesquare 1.2s infinite ease-in-out;    animation: rotatesquare 1.2s infinite ease-in-out;}@-webkit-keyframes rotatesquare {    0% { -webkit-transform: perspective(120px) }    50% { -webkit-transform: perspective(120px) rotateY(180deg) }    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }}@keyframes rotatesquare {  0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }  50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }  100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); }}/********************************************************************** * Spinner Bounce Circle *********************************************************************/.spinner-bounce-circle{    width: 60px;    height: 60px;    position: relative;    margin: 0 auto;}.spinner-bounce-circle div{    width: 100%;    height: 100%;    border-radius: 50%;    background-color: #333;    opacity: 0.6;    position: absolute;    top: 0;    left: 0;    -webkit-animation: circlebounce 2.0s infinite ease-in-out;    animation: circlebounce 2.0s infinite ease-in-out;}.spinner-bounce-circle div:nth-child(1) {    -webkit-animation-delay: -1.0s;    animation-delay: -1.0s;}@-webkit-keyframes circlebounce {    0%, 100% { -webkit-transform: scale(0.0) }    50% { -webkit-transform: scale(1.0) }}@keyframes circlebounce {    0%, 100% {        transform: scale(0.0);        -webkit-transform: scale(0.0);    }    50% {        transform: scale(1.0);        -webkit-transform: scale(1.0);    }}/********************************************************************** * Spinner Wave *********************************************************************/.spinner-wave {    margin: 0 auto;    width: 100px;    height: 50px;    text-align: center;}.spinner-wave > div {    background-color: #333;    height: 100%;    width: 6px;    display: inline-block;    -webkit-animation: wave 1.2s infinite ease-in-out;    animation: wave 1.2s infinite ease-in-out;}.spinner-wave div:nth-child(2) {    -webkit-animation-delay: -1.1s;    animation-delay: -1.1s;}.spinner-wave div:nth-child(3) {    -webkit-animation-delay: -1.0s;    animation-delay: -1.0s;}.spinner-wave div:nth-child(4) {    -webkit-animation-delay: -0.9s;    animation-delay: -0.9s;}.spinner-wave div:nth-child(5) {    -webkit-animation-delay: -0.8s;    animation-delay: -0.8s;}@-webkit-keyframes wave {    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }    20% { -webkit-transform: scaleY(1.0) }}@keyframes wave {    0%, 40%, 100% {        transform: scaleY(0.4);        -webkit-transform: scaleY(0.4);    }    20% {        transform: scaleY(1.0);        -webkit-transform: scaleY(1.0);    }}/********************************************************************** * Spinner Cube *********************************************************************/.spinner-cube{    margin: 0 auto;    width: 60px;    height: 60px;    position: relative;}.spinner-cube > div{    background-color: #333;    width: 20px;    height: 20px;    position: absolute;    top: 0;    left: 0;    -webkit-animation: cuberotate 1.8s infinite ease-in-out;    animation: cuberotate 1.8s infinite ease-in-out;}.spinner-cube div:nth-child(2){    -webkit-animation-delay: -0.9s;    animation-delay: -0.9s;}@-webkit-keyframes cuberotate {    25% { -webkit-transform: translateX(22px) rotate(-90deg) scale(0.5) }    50% { -webkit-transform: translateX(22px) translateY(22px) rotate(-180deg) }    75% { -webkit-transform: translateX(0px) translateY(22px) rotate(-270deg) scale(0.5) }    100% { -webkit-transform: rotate(-360deg) }}@keyframes cuberotate {    25% {        transform: translateX(42px) rotate(-90deg) scale(0.5);        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);    } 50% {        transform: translateX(42px) translateY(42px) rotate(-179deg);        -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);    } 50.1% {        transform: translateX(42px) translateY(42px) rotate(-180deg);        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);    } 75% {        transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);    } 100% {        transform: rotate(-360deg);        -webkit-transform: rotate(-360deg);    }}

来源：http://www.paulund.co.uk/playground/demo/css-only-loading-spinner/

0 0