"Preloader"
Bootstrap 4.1.1 Snippet by Siddharth Panchal

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <div class="container"> <h3 class="h3 text-white">Preloader Demo - 1 </h3> <div class="row"> <div class="col-md-12"> <div class="preloader1"> <div class="loader loader-inner-1"> <div class="loader loader-inner-2"> <div class="loader loader-inner-3"> </div> </div> </div> </div> </div> </div> </div> </div> <div class="container"> <br/><br/> <h3 class="h3">Preloader Demo - 2 </h3> <div class="row"> <div class="col-md-12"> <div class="preloader2"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </div> </div> </div> <br/><br/> </div> <div class="container-fluid bg-1"> <div class="container"> <h3 class="h3 text-white">Preloader Demo - 3 </h3> <div class="row"> <div class="col-md-12"> <div class="preloader3"></div> </div> </div> </div> </div> <div class="container"> <br/><br/> <h3 class="h3">Preloader Demo - 4 </h3> <div class="row"> <div class="col-md-12"> <div id="loader4"> <span class="loader loader-1"></span> <span class="loader loader-2"></span> <span class="loader loader-3"></span> <span class="loader loader-4"></span> </div> </div> </div> <br/><br/> </div> <hr> <div class="container"> <br/><br/> <h3 class="h3">Preloader Demo - 5 </h3> <div class="row"> <div class="col-md-12"> <div class="loader5"> <div class="loader-inner box-1"></div> <div class="loader-inner box-2"></div> <div class="loader-inner box-3"></div> <div class="loader-inner box-4"></div> </div> </div> </div> <br/><br/> </div> <hr> <div class="container"> <br/><br/> <h3 class="h3">Preloader Demo - 6</h3> <div class="row"> <div class="col-md-12"> <div class="loader6"> <span class="loader-inner"></span> </div> </div> </div> <br/><br/> </div> <hr> <div class="container"> <br/><br/> <h3 class="h3">Preloader Demo - 7</h3> <div class="row"> <div class="col-md-12"> <div class="loader7"> <span class="loader-inner-1"></span> <span class="loader-inner-2"></span> <span class="loader-inner-3"></span> <span class="loader-inner-4"></span> </div> </div> </div> <br/><br/> </div> <hr> <div class="container"> <br/><br/> <h3 class="h3">Preloader Demo - 8</h3> <div class="row"> <div class="col-md-12"> <div class="loader8"> <div class="loader-inner"></div> </div> </div> </div> <br/><br/> </div> <hr> <div class="container"> <br/><br/> <h3 class="h3">Preloader Demo - 9</h3> <div class="row"> <div class="col-md-12"> <div class="loader9"> <div class="box-1"></div> <div class="box-2"></div> </div> </div> </div> <br/><br/> </div> <hr> <div class="container"> <br/><br/> <h3 class="h3">Preloader Demo - 10</h3> <div class="row"> <div class="col-md-12"> <div class="loader10"> <span></span> <span></span> <span></span> <span></span> </div> </div> </div> <br/><br/> </div> <hr> <div class="container"> <br/><br/> <h3 class="h3">Preloader Demo - 11</h3> <div class="row"> <div class="col-md-12"> <div class="loader11"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> </div> <br/><br/> </div> <hr> <div class="container"> <br/><br/> <h3 class="h3">Preloader Demo - 12</h3> <div class="row"> <div class="col-md-12"> <div class="loader12"> <div class="loader-inner-1 box-1 box-red"></div> <div class="loader-inner-2 box-2 box-pink"></div> <div class="loader-inner-1 box-3 box-blue"></div> <div class="loader-inner-2 box-4 box-yellow"></div> <div class="loader-inner-1 box-5 box-peach"></div> <div class="loader-inner-2 box-6 box-pink"></div> <div class="loader-inner-1 box-7 box-green"></div> <div class="loader-inner-2 box-8 box-purple"></div> </div> </div> </div> <br/><br/> </div> <hr> <div class="container"> <br/><br/> <h3 class="h3">Preloader Demo - 13</h3> <div class="row"> <div class="col-md-12"> <div class="loader13"> <span></span> <span></span> <span></span> <span></span> </div> </div> </div> <br/><br/> </div> <hr> <div class="container"> <br/><br/> <h3 class="h3">Preloader Demo - 14</h3> <div class="row"> <div class="col-md-12"> <div class="loader14"> <div class="loader-inner"> <div class="box-1"></div> <div class="box-2"></div> <div class="box-3"></div> <div class="box-4"></div> </div> <span class="text">loading</span> </div> </div> </div> <br/><br/> </div> <hr> <div class="container"> <br/><br/> <h3 class="h3">Preloader Demo - 15</h3> <div class="row"> <div class="col-md-12"> <div class="loader15"> <span></span><span></span><span></span><span></span> </div> </div> </div> <br/><br/> </div> <hr> <div class="container"> <br/><br/> <h3 class="h3">Preloader Demo - 16</h3> <div class="row"> <div class="col-md-12"> <div class="loader16"></div> </div> </div> <br/><br/> </div> <hr> <div class="container"> <br/><br/> <h3 class="h3">Preloader Demo - 17</h3> <div class="row"> <div class="col-md-12"> <div class="loader17"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> </div> <br/><br/> </div> <div class="container-fluid bg-2"> <div class="container"> <h3 class="h3 text-white">Preloader Demo - 18</h3> <div class="row"> <div class="col-md-12"> <div class="loader18">Loading...</div> </div> </div> </div> </div> <div class="container"> <br/><br/> <h3 class="h3">Preloader Demo - 19</h3> <div class="row"> <div class="col-md-12"> <div class="loader19"> <div class="loader-inner"> <div class="box-1"> <div class="box-2"></div> </div> </div> </div> </div> </div> <br/><br/> </div> <div class="container-fluid bg-3"> <div class="container"> <h3 class="h3 text-white">Preloader Demo - 20</h3> <div class="row"> <div class="col-md-12"> <div class="loader20">Loading...</div> </div> </div> </div> </div>
body{background-color:#fff !important;} .text-white{color:#fff;text-shadow:1px 1px 1px #000;} h3.h3{text-align:center;padding:1.5em 0em 2em 0em;text-transform:capitalize;font-size:1.5em;} .container-fluid{padding:2em 0em 4em 0em;background: linear-gradient(to right,#7474bf,#348ac7);} .container{padding:2em 0em 5em 0em;} .bg-1{background: linear-gradient(to right,#7b4379,#dc2430);} .bg-2{background:#ABAD5D;} .bg-3{background:#1ABC9C;} /******************** Preloader Demo-1 *******************/ .preloader1,.preloader1 .loader{display:flex;align-content:center} .preloader1{height:100%;width:100%;padding:20px 0;flex-flow:column wrap;justify-content:center;align-items:center;perspective:700} .preloader1 .loader{text-align:center;margin:5px;border-radius:50%;border:4px solid #fff;flex-flow:column wrap;justify-content:center;align-items:center;transform-style:preserve-3d;position:relative} .preloader1 .preloader1 .loader-inner-1{animation:change_first_circle 2s ease-in-out infinite} .preloader1 .loader-inner-2{animation:change_second_circle 2s ease-in-out infinite} .preloader1 .loader-inner-3{width:100px;height:100px;animation:change_last_circle 3s linear infinite} @keyframes change_first_circle{ 50%{transform:rotateX(360deg) scale(.8)} } @keyframes change_second_circle{ 50%{transform:rotateY(360deg) scale(.8)} } @keyframes change_last_circle{ 50%{transform:rotateX(360deg) scale(.8)} } /******************** Preloader Demo-2 *******************/ .preloader2{height:105px;width:105px;margin:0 auto;animation:loader-container 10s linear infinite} .preloader2>div{width:44px;height:44px;box-shadow:0 0 8px -2px rgba(0,0,0,.3);position:absolute;animation-duration:1.5s;animation-timing-function:ease-in-out;animation-iteration-count:infinite} .preloader2 .box1{background:linear-gradient(-45deg,red,#d60c0c);transform-origin:bottom center;top:4px;left:4px;animation-name:box1} .preloader2 .box2{background:linear-gradient(-45deg,#15c109,#29870d);transform-origin:center left;top:4px;right:4px;animation-name:box2} .preloader2 .box3{background:linear-gradient(-45deg,#c300ff,#a808a8);transform-origin:top center;bottom:4px;right:4px;animation-name:box3} .preloader2 .box4{background:linear-gradient(-45deg,#fc8e28,#ea7e0b);transform-origin:center right;bottom:4px;left:4px;animation-name:box4} @keyframes loader-container{ 0%,23%{transform:rotate(0)} 25%,48%{transform:rotate(90deg)} 50%,73%{transform:rotate(180deg)} 75%,98%{transform:rotate(270deg)} 100%{transform:rotate(360deg)} } @keyframes box1{ 0%,100%,99%{transform:perspective(200px) rotateX(90deg)} 11%,88%{transform:perspective(200px) rotateX(0)} } @keyframes box2{ 0%,100%,11%,88%{transform:perspective(200px) rotateY(90deg)} 22%,77%{transform:perspective(200px) rotateY(0)} } @keyframes box3{ 0%,100%,22%,77%{transform:perspective(200px) rotateX(-90deg)} 33%,66%{transform:perspective(200px) rotateX(0)} } @keyframes box4{ 0%,100%,33%,66%{transform:perspective(200px) rotateY(-90deg)} 44%,55%{transform:perspective(200px) rotateY(0)} } /******************** Preloader Demo-3 *******************/ .preloader3{height:80px;width:80px;margin:20px auto 0;position:relative} .preloader3:after,.preloader3:before{content:'';height:100%;width:100%;border:9px solid #fff;border-color:transparent #fff;position:absolute;left:0;top:0;animation:spin 2.2s linear 0s infinite normal} .preloader3:after{width:50%;height:50%;margin:auto;border-style:dotted;border-radius:50px;left:0;top:0;bottom:0;right:0;animation:spinback 1.5s linear 0s infinite normal} @keyframes spin{ from{transform:rotate(0)} to{transform:rotate(360deg)} } @keyframes spinback{ from{transform:rotate(0)} to{transform:rotate(-360deg)} } /******************** Preloader Demo-4 *******************/ #loader4{height:100px;width:260px;margin:70px auto 0;position:relative} #loader4 .loader{background:#ccc;width:40px;height:40px;border-radius:24px;display:inline-block;position:absolute} #loader4 .loader-1{animation:animateDot1 1.5s linear infinite;left:130px;background:#f73138} #loader4 .loader-2{background:#00b733;left:60px;animation:animateDot2 1.5s linear infinite;animation-delay:.5s} #loader4 .loader-3{background:#448afc;left:130px;animation:animateDot3 1.5s linear infinite} #loader4 .loader-4{background:#950faf;left:60px;animation:animateDot4 1.5s linear infinite;animation-delay:.5s} @keyframes animateDot1{ 0%{transform:rotate(0) translateX(-60px)} 25%,75%{transform:rotate(180deg) translateX(-60px)} 100%{transform:rotate(360deg) translateX(-60px)} } @keyframes animateDot2{ 0%{transform:rotate(0) translateX(-70px)} 25%,75%{transform:rotate(-180deg) translateX(-70px)} 100%{transform:rotate(-360deg) translateX(-70px)} } @keyframes animateDot3{ 0%{transform:rotate(0) translateX(60px)} 25%,75%{transform:rotate(180deg) translateX(60px)} 100%{transform:rotate(360deg) translateX(60px)} } @keyframes animateDot4{ 0%{transform:rotate(0) translateX(60px)} 25%,75%{transform:rotate(-180deg) translateX(60px)} 100%{transform:rotate(-360deg) translateX(60px)} } /******************** Preloader Demo-5 *******************/ .loader5{width:300px;height:300px;margin:20px auto;position:relative} .loader5 .loader-inner{width:50px;height:50px;border-radius:25px;position:absolute;transition:all .8s ease-in-out} .loader5 .box-1{background:#89fc00;top:125px;right:0;-webkit-animation:loading-1 2.2s infinite;animation:loading-1 2.2s infinite} .loader5 .box-2{background:#dc0073;top:125px;-webkit-animation:loading-2 2.2s infinite;animation:loading-2 2.2s infinite} .loader5 .box-3{background:#1be7ff;top:0;left:125px;-webkit-animation:loading-3 2.2s infinite;animation:loading-3 2.2s infinite} .loader5 .box-4{background:#ffb800;bottom:0;left:125px;-webkit-animation:loading-4 2.2s infinite;animation:loading-4 2.2s infinite} @keyframes loading-1{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(-250px)} } @keyframes loading-2{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(250px)} } @keyframes loading-3{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(250px)} } @keyframes loading-4{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-250px)} } /******************** Preloader Demo-6 *******************/ .loader6,.loader6:after,.loader6:before{width:150px;height:150px;border-radius:50%} .loader6 .loader-inner,.loader6:after,.loader6:before{top:50%;transform:translate(-50%,-50%);position:absolute} .loader6{margin:0 auto;position:relative;animation:loading-6 .8s infinite} .loader6:after,.loader6:before{content:"";margin-left:50%;border:10px solid transparent;border-left:10px solid #e3b505} .loader6:after{border:10px solid transparent;border-right:10px solid #e3b505;position:absolute} .loader6 .loader-inner{display:block;width:120px;height:120px;border-radius:50%;border:6px solid #f42b25;margin:0 auto 0 50%} .loader6 .loader-inner:after,.loader6 .loader-inner:before{content:"";width:80px;height:80px;border-radius:50%;border:10px solid transparent;border-left:10px solid #0cb3ea;margin-left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)} .loader6 .loader-inner:after{border:10px solid transparent;border-right:10px solid #0cb3ea} @-webkit-keyframes loading-6{ 0%{transform:rotate(180deg)} 100%{transform:rotate(360deg)} } @keyframes loading-6{ 0%{transform:rotate(180deg)} 100%{transform:rotate(360deg)} } /******************** Preloader Demo-7 *******************/ .loader7{width:100px;height:100px;margin:50px auto;position:relative} .loader7 .loader-inner-1,.loader7 .loader-inner-2,.loader7 .loader-inner-3,.loader7 .loader-inner-4{display:block;width:20px;height:20px;border-radius:20px;position:absolute} .loader7 .loader-inner-1:before,.loader7 .loader-inner-2:before,.loader7 .loader-inner-3:before,.loader7 .loader-inner-4:before{content:"";display:block;width:20px;height:20px;border-radius:20px;position:absolute;right:0;animation-name:loading-7;animation-iteration-count:infinite;animation-direction:normal;animation-duration:2s} .loader7 .loader-inner-1{top:0;left:0;transform:rotate(70deg)} .loader7 .loader-inner-1:before{background:#06aed5} .loader7 .loader-inner-2{top:0;right:0;transform:rotate(160deg)} .loader7 .loader-inner-2:before{background:#ec008c} .loader7 .loader-inner-3{bottom:0;right:0;transform:rotate(-110deg)} .loader7 .loader-inner-3:before{background:#ffbf00} .loader7 .loader-inner-4{bottom:0;left:0;transform:rotate(-20deg)} .loader7 .loader-inner-4:before{background:#079c00} @keyframes loading-7{ 0%{width:20px;right:0} 30%{width:120px;right:-100px} 60%{width:20px;right:-100px} } /******************** Preloader Demo-8 *******************/ .loader8 .loader-inner,.loader8 .loader-inner:before{border-radius:50%;width:50px;height:50px;position:absolute} .loader8{width:200px;height:90px;margin:60px auto;position:relative} .loader8 .loader-inner{margin-top:22%;margin-left:50%;transform:translate(-50%,-50%)} .loader8 .loader-inner:before{content:"";background:0 0;box-shadow:0 0 0 3px #1c5770,0 0 0 17px #03b5aa,-3px -3px 0 #1c5770 inset;left:0;z-index:1} .loader8 .loader-inner:after{content:"";width:30px;height:30px;border-radius:50%;background:#ffb03b;box-shadow:-7px -7px 0 #cc8c2c inset;position:absolute;top:10px;left:80px;z-index:-1;-webkit-animation:loading-8 3s linear infinite;animation:loading-8 3s linear infinite} @-webkit-keyframes loading-8{ 0%,100%{width:30px;height:30px;left:15px;z-index:10} 13%,64%{width:40px;height:40px} 22%,28%{left:-56px} 23%,27%{left:-57px} 24%{width:30px;height:30px;z-index:10} 25%{left:-60px;z-index:-10} 38%,89%{width:20px;height:20px} 49%{width:30px;height:30px;z-index:-10} 50%{left:15px;z-index:10} 72%,78%{left:86px} 73%,77%{left:87px} 74%{z-index:10} 75%{width:30px;height:30px;left:90px;z-index:-10} 99%{z-index:-10} } @keyframes loading-8{ 0%,100%{width:30px;height:30px;left:15px;z-index:10} 13%,64%{width:40px;height:40px} 22%,28%{left:-56px} 23%,27%{left:-57px} 24%{width:30px;height:30px;z-index:10} 25%{left:-60px;z-index:-10} 38%,89%{width:20px;height:20px} 49%{width:30px;height:30px;z-index:-10} 50%{left:15px;z-index:10} 72%,78%{left:86px} 73%,77%{left:87px} 74%{z-index:10} 75%{width:30px;height:30px;left:90px;z-index:-10} 99%{z-index:-10} } /******************** Preloader Demo-9 *******************/ .loader9{width:256px;height:256px;margin:100px auto 0;position:relative} .loader9:after{content:"";width:64px;height:12px;border-radius:50%;background:rgba(0,0,0,.05);position:absolute;top:205px;left:96px;animation:loading-93 1.25s linear infinite} .loader9 .box-1,.loader9 .box-2{border-radius:2px;position:absolute} .loader9 .box-1{width:64px;height:64px;background:#72e82b;top:146px;left:96px;z-index:1;animation:loading-9 1.25s linear infinite} .loader9 .box-2{width:32px;height:32px;background:#ff1160;top:114px;left:112px;animation:loading-92 1.25s linear infinite} @-webkit-keyframes loading-9{ 0%,5%{width:128px;height:32px;transform:translateX(-32px) translateY(35px) rotate(0)} 22%{transform:translateX(0) translateY(0) rotate(0)} 25%{width:64px;height:64px;transform:translateX(0) translateY(-10px) rotate(0)} 35%{transform:translateX(0) translateY(-90px) rotate(30deg)} 45%{transform:translateX(0) translateY(-130px) rotate(60deg)} 50%{transform:translateX(0) translateY(-145px) rotate(75deg)} 55%{transform:translateX(0) translateY(-150px) rotate(90deg)} 60%{transform:translateX(0) translateY(-140px) rotate(105deg)} 65%{transform:translateX(0) translateY(-130px) rotate(120deg)} 75%{transform:translateX(0) translateY(-90px) rotate(150deg)} 85%{width:64px;height:64px;transform:translateX(0) translateY(0) rotate(180deg)} 100%{width:128px;height:32px;transform:translateX(-32px) translateY(35px) rotate(180deg)} } @keyframes loading-9{ 0%,5%{width:128px;height:32px;transform:translateX(-32px) translateY(35px) rotate(0)} 22%{transform:translateX(0) translateY(0) rotate(0)} 25%{width:64px;height:64px;transform:translateX(0) translateY(-10px) rotate(0)} 35%{transform:translateX(0) translateY(-90px) rotate(30deg)} 45%{transform:translateX(0) translateY(-130px) rotate(60deg)} 50%{transform:translateX(0) translateY(-145px) rotate(75deg)} 55%{transform:translateX(0) translateY(-150px) rotate(90deg)} 60%{transform:translateX(0) translateY(-140px) rotate(105deg)} 65%{transform:translateX(0) translateY(-130px) rotate(120deg)} 75%{transform:translateX(0) translateY(-90px) rotate(150deg)} 85%{width:64px;height:64px;transform:translateX(0) translateY(0) rotate(180deg)} 100%{width:128px;height:32px;transform:translateX(-32px) translateY(35px) rotate(180deg)} } @-webkit-keyframes loading-92{ 0%,5%{width:64px;height:16px;transform:translateX(-16px) translateY(51px) rotate(0)} 22%{transform:translateX(0) translateY(3px) rotate(0)} 25%{width:32px;height:32px;transform:translateX(0) translateY(-15px) rotate(0)} 35%{transform:translateX(0) translateY(-135px) rotate(-60deg)} 45%{transform:translateX(0) translateY(-195px) rotate(-120deg)} 50%{transform:translateX(0) translateY(-215px) rotate(-150deg)} 55%{transform:translateX(0) translateY(-225px) rotate(-180deg)} 60%{transform:translateX(0) translateY(-215px) rotate(-210deg)} 65%{transform:translateX(0) translateY(-195px) rotate(-240deg)} 75%{transform:translateX(0) translateY(-135px) rotate(-300deg)} 85%{width:32px;height:32px;transform:translateX(0) translateY(0) rotate(-360deg)} 100%{width:64px;height:16px;transform:translateX(-16px) translateY(51px) rotate(-360deg)} } @keyframes loading-92{ 0%,5%{width:64px;height:16px;transform:translateX(-16px) translateY(51px) rotate(0)} 22%{transform:translateX(0) translateY(3px) rotate(0)} 25%{width:32px;height:32px;transform:translateX(0) translateY(-15px) rotate(0)} 35%{transform:translateX(0) translateY(-135px) rotate(-60deg)} 45%{transform:translateX(0) translateY(-195px) rotate(-120deg)} 50%{transform:translateX(0) translateY(-215px) rotate(-150deg)} 55%{transform:translateX(0) translateY(-225px) rotate(-180deg)} 60%{transform:translateX(0) translateY(-215px) rotate(-210deg)} 65%{transform:translateX(0) translateY(-195px) rotate(-240deg)} 75%{transform:translateX(0) translateY(-135px) rotate(-300deg)} 85%{width:32px;height:32px;transform:translateX(0) translateY(0) rotate(-360deg)} 100%{width:64px;height:16px;transform:translateX(-16px) translateY(51px) rotate(-360deg)} } @-webkit-keyframes loading-93{ 0%,100%{transform:scale(2.5,1)} 30%,85%{transform:scale(1.5,1)} 55%{transform:scale(.8,.8)} } @keyframes loading-93{ 0%,100%{transform:scale(2.5,1)} 30%,85%{transform:scale(1.5,1)} 55%{transform:scale(.8,.8)} } /******************** Preloader Demo-10 *******************/ .loader10{width:100px;height:100px;margin:50px auto;overflow:hidden;position:relative} .loader10 span{display:inline-block;position:absolute;animation:loading-10 9s cubic-bezier(.45,.05,.55,.95) infinite} .loader10 span:nth-child(1){background:#ff4b7d;animation-name:loading-10} .loader10 span:nth-child(2){background:#3485ef;animation-name:loading-102} .loader10 span:nth-child(3){background:#5fad56;animation-name:loading-103} .loader10 span:nth-child(4){background:#e9573d;animation-name:loading-104} @keyframes loading-10{ 0%,5%{width:25%;height:25%;border-radius:100% 0 0;background:#ff4b7d;bottom:50%;left:25%} 10%{width:25%;height:25%;border-radius:100% 100% 0 0;background:#ff4b7d;bottom:50%;left:25%} 13%,18%{width:25%;height:25%;border-radius:100% 100% 0 0;background:#5fad56;bottom:50%;left:12.5%} 20%{width:32.5%;height:32.5%;border-radius:50%;background:#5fad56;bottom:50%;left:6.25%} 25%,30%{width:25%;height:25%;border-radius:50%;background:#3485ef;bottom:62.5%;left:12.5%} 35%{width:14%;height:10%;border-radius:999px;background:#ff4b7d;left:0;bottom:0} 40%,60%{height:100%} 55%{height:10%} 70%{width:14%;height:25%;border-radius:999px;background:#ff4b7d;bottom:0;left:0} 75%,97%{width:25%;height:25%;border-radius:100%;bottom:57.5%;left:17.5%} 100%{width:50%;height:50%;border-radius:100%;bottom:25%;left:25%} } @keyframes loading-102{ 0%,5%{width:25%;height:25%;background:#ff4b7d;border-radius:0 0 0 100%;bottom:25%;left:25%} 10%{width:25%;height:25%;background:#ff4b7d;border-radius:0 0 100% 100%;bottom:25%;left:25%} 13%,18%{width:25%;height:25%;background:#5fad56;border-radius:0 0 100% 100%;bottom:25%;left:12.5%} 20%{width:32.5%;height:32.5%;background:#5fad56;border-radius:50%;bottom:25%;left:6.25%} 25%{width:25%;height:25%;background:#3485ef;border-radius:50%;bottom:12.5%;left:12.5%} 30%{left:12.5%;bottom:12.5%;border-radius:50%;height:25%;width:25%;background:#3485EF} 35%{left:28%;bottom:0;border-radius:999px;height:10%;width:14%;background:#3485EF} 40%,60%{height:10%} 45%,65%{height:100%} 75%{left:28%;bottom:0;border-radius:999px;height:25%;width:14%;background:#3485EF} 80%{left:17.5%;bottom:17.5%;border-radius:100%;height:25%;width:25%} 97%{left:17.5%;bottom:17.5%;border-radius:100%;height:25%;width:25%;box-shadow:none} 100%{box-shadow:-3px -3px 5px -5px #3485EF;border-radius:100%;left:25%;bottom:-50%;height:50%;width:50%} } @keyframes loading-103{ 0%,5%{left:50%;bottom:50%;border-radius:0 100% 0 0;height:25%;width:25%;background:#FF4B7D} 10%{left:50%;bottom:50%;border-radius:100% 100% 0 0;height:25%;width:25%;background:#FF4B7D} 13%,18%{left:62.5%;bottom:50%;border-radius:100% 100% 0 0;height:25%;width:25%;background:#5FAD56} 20%{left:66.25%;bottom:50%;border-radius:50%;height:32.5%;width:32.5%;background:#5FAD56} 25%,30%{left:62.5%;bottom:62.5%;border-radius:50%;height:25%;width:25%;background:#3485EF} 35%{left:56%;bottom:0;border-radius:999px;height:10%;width:14%;background:#5FAD56} 45%,65%{height:10%} 50%,70%{height:100%} 80%{left:56%;bottom:0;border-radius:999px;height:25%;width:14%;background:#5FAD56} 85%{left:57.5%;bottom:57.5%;border-radius:100%;height:25%;width:25%} 97%{left:57.5%;bottom:57.5%;border-radius:100%;height:25%;width:25%;box-shadow:none} 100%{box-shadow:-3px -3px 5px -5px #5FAD56;border-radius:100%;left:100%;bottom:25%;height:50%;width:50%} } @keyframes loading-104{ 0%,5%{left:50%;bottom:25%;border-radius:0 0 100%;height:25%;width:25%;background:#FF4B7D} 10%{left:50%;bottom:25%;border-radius:0 0 100% 100%;height:25%;width:25%;background:#FF4B7D} 13%,18%{left:62.5%;bottom:25%;border-radius:0 0 100% 100%;height:25%;width:25%;background:#5FAD56} 20%{left:66.25%;bottom:25%;border-radius:50%;height:32.5%;width:32.5%;background:#5FAD56} 25%,30%{left:62.5%;bottom:12.5%;border-radius:50%;height:25%;width:25%;background:#3485EF} 35%{left:84%;bottom:0;border-radius:999px;height:10%;width:14%;background:#e9573d} 50%,70%{height:10%} 55%,75%{height:100%} 85%{left:84%;bottom:0;border-radius:999px;height:25%;width:14%;background:#E9573D} 90%{left:57.5%;bottom:17.5%;border-radius:100%;height:25%;width:25%} 97%{left:57.5%;bottom:17.5%;border-radius:100%;height:25%;width:25%;box-shadow:none} 100%{box-shadow:-3px -3px 5px -5px #e9573d;border-radius:100%;left:100%;bottom:-50%;height:50%;width:50%} } /******************** Preloader Demo-11 *******************/ .loader11{width:100px;height:70px;margin:50px auto;position:relative} .loader11 span{display:block;width:5px;height:10px;background:#e43632;position:absolute;bottom:0;animation:loading-11 2.25s infinite ease-in-out} .loader11 span:nth-child(2){left:11px;animation-delay:.2s} .loader11 span:nth-child(3){left:22px;animation-delay:.4s} .loader11 span:nth-child(4){left:33px;animation-delay:.6s} .loader11 span:nth-child(5){left:44px;animation-delay:.8s} .loader11 span:nth-child(6){left:55px;animation-delay:1s} .loader11 span:nth-child(7){left:66px;animation-delay:1.2s} .loader11 span:nth-child(8){left:77px;animation-delay:1.4s} .loader11 span:nth-child(9){left:88px;animation-delay:1.6s} @-webkit-keyframes loading-11{ 0%{height:10px;transform:translateY(0);background:#ff4d80} 25%{height:60px;transform:translateY(15px);background:#3423a6} 50%{height:10px;transform:translateY(-10px);background:#e29013} 100%{height:10px;transform:translateY(0);background:#e50926} } @keyframes loading-11{ 0%{height:10px;transform:translateY(0);background:#ff4d80} 25%{height:60px;transform:translateY(15px);background:#3423a6} 50%{height:10px;transform:translateY(-10px);background:#e29013} 100%{height:10px;transform:translateY(0);background:#e50926} } /******************** Preloader Demo-12 *******************/ .loader12{width:100px;height:100px;margin:60px auto;position:relative;-webkit-transform:rotate(45deg);transform:rotate(45deg)} .loader12 .loader-inner-1{width:33.333%;height:33.333%;position:absolute} .loader12 .loader-inner-2{position:absolute;width:16.6665%;height:16.6665%} .loader12 .box-1{top:0;left:50%;margin-left:-16.6665%;-webkit-animation:loading-12 2s cubic-bezier(.585,-.225,.43,1.31) infinite;animation:loading-12 2s cubic-bezier(.585,-.225,.43,1.31) infinite} .loader12 .box-2{top:0;left:0;-webkit-animation:loading-126 2s cubic-bezier(.585,-.225,.43,1.31) infinite;animation:loading-126 2s cubic-bezier(.585,-.225,.43,1.31) infinite} .loader12 .box-3{top:50%;right:0;margin-top:-16.6665%;-webkit-animation:loading-122 2s cubic-bezier(.585,-.225,.43,1.31) infinite;animation:loading-122 2s cubic-bezier(.585,-.225,.43,1.31) infinite} .loader12 .box-4{top:0;right:0;-webkit-animation:loading-125 2s cubic-bezier(.585,-.225,.43,1.31) infinite;animation:loading-125 2s cubic-bezier(.585,-.225,.43,1.31) infinite} .loader12 .box-5{top:50%;left:0;margin-top:-16.6665%;-webkit-animation:loading-124 2s cubic-bezier(.585,-.225,.43,1.31) infinite;animation:loading-124 2s cubic-bezier(.585,-.225,.43,1.31) infinite} .loader12 .box-6{bottom:0;right:0;-webkit-animation:loading-127 2s cubic-bezier(.585,-.225,.43,1.31) infinite;animation:loading-127 2s cubic-bezier(.585,-.225,.43,1.31) infinite} .loader12 .box-7{bottom:0;left:50%;margin-left:-16.6665%;-webkit-animation:loading-123 2s cubic-bezier(.585,-.225,.43,1.31) infinite;animation:loading-123 2s cubic-bezier(.585,-.225,.43,1.31) infinite} .loader12 .box-8{bottom:0;left:0;-webkit-animation:loading-128 2s cubic-bezier(.585,-.225,.43,1.31) infinite;animation:loading-128 2s cubic-bezier(.585,-.225,.43,1.31) infinite} .loader12 .box-red{background:#f52220} .loader12 .box-blue{background:#02c1c1} .loader12 .box-green{background:#009a3c} .loader12 .box-peach{background:#db5b53} .loader12 .box-pink{background:#e40066} .loader12 .box-yellow{background:#f59c00} .loader12 .box-purple{background:#5c0475} @-webkit-keyframes loading-12{ 0%,100%{top:0;-webkit-transform:translateZ(0);transform:translateZ(0)} 25%,75%{-webkit-transform:translateZ(100px);transform:translateZ(100px)} 50%{top:66.666%;-webkit-transform:translateZ(0);transform:translateZ(0)} } @keyframes loading-12{ 0%,100%{top:0;-webkit-transform:translateZ(0);transform:translateZ(0)} 25%,75%{-webkit-transform:translateZ(100px);transform:translateZ(100px)} 50%{top:66.666%;-webkit-transform:translateZ(0);transform:translateZ(0)} } @-webkit-keyframes loading-122{ 0%,100%{right:0;-webkit-transform:translateZ(0);transform:translateZ(0)} 25%,75%{-webkit-transform:translateZ(100px);transform:translateZ(100px)} 50%{right:66.666%;-webkit-transform:translateZ(0);transform:translateZ(0)} } @keyframes loading-122{ 0%,100%{right:0;-webkit-transform:translateZ(0);transform:translateZ(0)} 25%,75%{-webkit-transform:translateZ(100px);transform:translateZ(100px)} 50%{right:66.666%;-webkit-transform:translateZ(0);transform:translateZ(0)} } @-webkit-keyframes loading-123{ 0%,100%{bottom:0;-webkit-transform:translateZ(0);transform:translateZ(0)} 25%,75%{-webkit-transform:translateZ(100px);transform:translateZ(100px)} 50%{bottom:66.666%;-webkit-transform:translateZ(0);transform:translateZ(0)} } @keyframes loading-123{ 0%,100%{bottom:0;-webkit-transform:translateZ(0);transform:translateZ(0)} 25%,75%{-webkit-transform:translateZ(100px);transform:translateZ(100px)} 50%{bottom:66.666%;-webkit-transform:translateZ(0);transform:translateZ(0)} } @-webkit-keyframes loading-124{ 0%,100%{left:0;-webkit-transform:translateZ(0);transform:translateZ(0)} 25%,75%{-webkit-transform:translateZ(100px);transform:translateZ(100px)} 50%{left:66.666%;-webkit-transform:translateZ(0);transform:translateZ(0)} } @keyframes loading-124{ 0%,100%{left:0;-webkit-transform:translateZ(0);transform:translateZ(0)} 25%,75%{-webkit-transform:translateZ(100px);transform:translateZ(100px)} 50%{left:66.666%;-webkit-transform:translateZ(0);transform:translateZ(0)} } @-webkit-keyframes loading-125{ 0%,100%{top:0;-webkit-transform:translateZ(0);transform:translateZ(0)} 25%,75%{-webkit-transform:translateZ(300px);transform:translateZ(300px)} 50%{top:83.3335%;-webkit-transform:translateZ(0);transform:translateZ(0)} } @keyframes loading-125{ 0%,100%{top:0;-webkit-transform:translateZ(0);transform:translateZ(0)} 25%,75%{-webkit-transform:translateZ(300px);transform:translateZ(300px)} 50%{top:83.3335%;-webkit-transform:translateZ(0);transform:translateZ(0)} } @-webkit-keyframes loading-126{ 0%,100%{left:0;-webkit-transform:translateZ(0);transform:translateZ(0)} 25%,75%{-webkit-transform:translateZ(300px);transform:translateZ(300px)} 50%{left:83.3335%;-webkit-transform:translateZ(0);transform:translateZ(0)} } @keyframes loading-126{ 0%,100%{left:0;-webkit-transform:translateZ(0);transform:translateZ(0)} 25%,75%{-webkit-transform:translateZ(300px);transform:translateZ(300px)} 50%{left:83.3335%;-webkit-transform:translateZ(0);transform:translateZ(0)} } @-webkit-keyframes loading-127{ 0%,100%{right:0;-webkit-transform:translateZ(0);transform:translateZ(0)} 25%,75%{-webkit-transform:translateZ(300px);transform:translateZ(300px)} 50%{right:83.3335%;-webkit-transform:translateZ(0);transform:translateZ(0)} } @keyframes loading-127{ 0%,100%{right:0;-webkit-transform:translateZ(0);transform:translateZ(0)} 25%,75%{-webkit-transform:translateZ(300px);transform:translateZ(300px)} 50%{right:83.3335%;-webkit-transform:translateZ(0);transform:translateZ(0)} } @-webkit-keyframes loading-128{ 0%,100%{bottom:0;-webkit-transform:translateZ(0);transform:translateZ(0)} 25%,75%{-webkit-transform:translateZ(300px);transform:translateZ(300px)} 50%{bottom:83.3335%;-webkit-transform:translateZ(0);transform:translateZ(0)} } @keyframes loading-128{ 0%,100%{bottom:0;-webkit-transform:translateZ(0);transform:translateZ(0)} 25%,75%{-webkit-transform:translateZ(300px);transform:translateZ(300px)} 50%{bottom:83.3335%;-webkit-transform:translateZ(0);transform:translateZ(0)} } /******************** Preloader Demo-13 *******************/ .loader13{width:20px;height:20px;margin:100px auto;transform-origin:center;animation:loading-13 1s ease-in-out infinite} .loader13 span,.loader13 span:after,.loader13 span:before{content:"";display:inline-block;width:20px;height:20px;border-radius:50%;position:absolute} .loader13 span:before{transform:translate(0,-20px) scale(.75)} .loader13 span:after{transform:translate(0,-35px) scale(.5)} .loader13 span:nth-child(1){transform:translate(0,50px)} .loader13 span:nth-child(1),.loader13 span:nth-child(1):after,.loader13 span:nth-child(1):before{background:#dc005a} .loader13 span:nth-child(2),.loader13 span:nth-child(2):after,.loader13 span:nth-child(2):before{background:#7a4b94} .loader13 span:nth-child(2){transform:rotate(90deg) translate(0,50px)} .loader13 span:nth-child(3),.loader13 span:nth-child(3):after,.loader13 span:nth-child(3):before{background:#26a4d9} .loader13 span:nth-child(3){transform:rotate(180deg) translate(0,50px)} .loader13 span:nth-child(4),.loader13 span:nth-child(4):after,.loader13 span:nth-child(4):before{background:#8ca865} .loader13 span:nth-child(4){transform:rotate(270deg) translate(0,50px)} @-webkit-keyframes loading-13{ 100%,80%{transform:rotate(360deg)} } @keyframes loading-13{ 100%,80%{transform:rotate(360deg)} } /******************** Preloader Demo-14 *******************/ .loader14{width:90px;height:90px;margin:40px auto} .loader14 .loader-inner{width:60px;height:60px;position:relative;margin:0 auto} .loader14 .loader-inner div{content:"";width:16px;height:16px;border-radius:50%;background:#00bee0;position:absolute;top:10px;left:10px;transform-origin:20px 20px;-webkit-animation:loading-14 2s infinite cubic-bezier(.5,0,.5,1);animation:loading-14 2s infinite cubic-bezier(.5,0,.5,1)} .loader14 .loader-inner .box-2{top:10px;left:auto;right:10px;transform-origin:-4px 20px;-webkit-animation:loading-142 2s infinite cubic-bezier(.5,0,.5,1);animation:loading-142 2s infinite cubic-bezier(.5,0,.5,1)} .loader14 .loader-inner .box-3{top:auto;left:auto;right:10px;bottom:10px;transform-origin:-4px -4px;-webkit-animation:loading-143 2s infinite cubic-bezier(.5,0,.5,1);animation:loading-143 2s infinite cubic-bezier(.5,0,.5,1)} .loader14 .loader-inner .box-4{top:auto;bottom:10px;transform-origin:20px -4px;-webkit-animation:loading-144 2s infinite cubic-bezier(.5,0,.5,1);animation:loading-144 2s infinite cubic-bezier(.5,0,.5,1)} .loader14 .text{display:block;font-size:12px;color:#00bee0;text-align:center} @-webkit-keyframes loading-14{ 0%{transform:rotate(90deg)} 50%{transform:rotate(180deg)} 75%{transform:rotate(270deg)} 100%{transform:rotate(360deg)} } @keyframes loading-14{ 0%{transform:rotate(90deg)} 50%{transform:rotate(180deg)} 75%{transform:rotate(270deg)} 100%{transform:rotate(360deg)} } @-webkit-keyframes loading-142{ 0%,25%{transform:rotate(90deg)} 25%{transform:rotate(180deg)} 75%{transform:rotate(270deg)} 100%{transform:rotate(360deg)} } @keyframes loading-142{ 0%,25%{transform:rotate(90deg)} 25%{transform:rotate(180deg)} 75%{transform:rotate(270deg)} 100%{transform:rotate(360deg)} } @-webkit-keyframes loading-143{ 0%,25%{transform:rotate(90deg)} 50%{transform:rotate(270deg)} 100%{transform:rotate(360deg)} } @keyframes loading-143{ 0%,25%{transform:rotate(90deg)} 50%{transform:rotate(270deg)} 100%{transform:rotate(360deg)} } @-webkit-keyframes loading-144{ 0%,25%{transform:rotate(90deg)} 50%{transform:rotate(180deg)} 100%,75%{transform:rotate(360deg)} } @keyframes loading-144{ 0%,25%{transform:rotate(90deg)} 50%{transform:rotate(180deg)} 100%,75%{transform:rotate(360deg)} } /******************** Preloader Demo-15 *******************/ .loader15{text-align:center;margin:40px 0} .loader15 span{width:20px;height:20px;border-radius:50%;background:#f7bd3a;display:inline-block} .loader15 span:first-child{animation:loading-152 .5s linear infinite;opacity:0;transform:translate(-20px)} .loader15 span:nth-child(2),.loader15 span:nth-child(3){animation:loading-153 .5s linear infinite} .loader15 span:last-child{animation:loading-15 .5s linear infinite} @-webkit-keyframes loading-15{ 100%{transform:translate(40px);opacity:0} } @keyframes loading-15{ 100%{transform:translate(40px);opacity:0} } @-webkit-keyframes loading-152{ 100%{transform:translate(20px);opacity:1} } @keyframes loading-152{ 100%{transform:translate(20px);opacity:1} } @-webkit-keyframes loading-153{ 100%{transform:translate(20px)} } @keyframes loading-153{ 100%{transform:translate(20px)} } /******************** Preloader Demo-16 *******************/ .loader16{width:50px;height:50px;margin:30px auto 40px;position:relative} .loader16:after,.loader16:before{content:"";width:50px;position:absolute;left:0} .loader16:before{height:5px;border-radius:50%;background:#000;opacity:.1;top:59px;animation:shadow .5s linear infinite} .loader16:after{height:50px;border-radius:3px;background:#008bba;top:0;animation:loading .5s linear infinite} @-webkit-keyframes loading{ 17%{border-bottom-right-radius:3px} 25%{transform:translateY(9px) rotate(22.5deg)} 50%{transform:translateY(18px) scale(1,.9) rotate(45deg);border-bottom-right-radius:40px} 75%{transform:translateY(9px) rotate(67.5deg)} 100%{transform:translateY(0) rotate(90deg)} } @keyframes loading{ 17%{border-bottom-right-radius:3px} 25%{transform:translateY(9px) rotate(22.5deg)} 50%{transform:translateY(18px) scale(1,.9) rotate(45deg);border-bottom-right-radius:40px} 75%{transform:translateY(9px) rotate(67.5deg)} 100%{transform:translateY(0) rotate(90deg)} } @-webkit-keyframes shadow{ 0%,100%{transform:scale(1,1)} 50%{transform:scale(1.2,1)} } @keyframes shadow{ 0%,100%{transform:scale(1,1)} 50%{transform:scale(1.2,1)} } /******************** Preloader Demo-17 *******************/ .loader17{position:relative;width:65px;border:1px solid transparent;margin:40px auto} .loader17 span{position:absolute;bottom:0;display:block;width:9px;height:5px;border-radius:5px;background:rgba(0,0,0,.1);-webkit-animation:preloader 2s infinite ease-in-out;animation:preloader 2s infinite ease-in-out} .loader17 span:nth-child(2){left:11px;-webkit-animation-delay:.2s;animation-delay:.2s} .loader17 span:nth-child(3){left:22px;-webkit-animation-delay:.4s;animation-delay:.4s} .loader17 span:nth-child(4){left:33px;-webkit-animation-delay:.6s;animation-delay:.6s} .loader17 span:nth-child(5){left:44px;-webkit-animation-delay:.8s;animation-delay:.8s} .loader17 span:nth-child(6){left:55px;-webkit-animation-delay:1s;animation-delay:1s} @-webkit-keyframes preloader{ 0%,100%,50%{height:5px;-webkit-transform:translateY(0);transform:translateY(0);background:rgba(0,0,0,.1)} 25%{height:30px;-webkit-transform:translateY(15px);transform:translateY(15px);background:#f8990c} } @keyframes preloader{ 0%,100%,50%{height:5px;-webkit-transform:translateY(0);transform:translateY(0);background:rgba(0,0,0,.1)} 25%{height:30px;-webkit-transform:translateY(15px);transform:translateY(15px);background:#f8990c} } /******************** Preloader Demo-18 *******************/ .loader18{font-size:90px;text-indent:-9999em;overflow:hidden;width:1em;height:1em;border-radius:50%;margin:72px auto;position:relative;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load18 1.7s infinite ease;animation:load18 1.7s infinite ease} @-webkit-keyframes load18{ 0%{-webkit-transform:rotate(0);transform:rotate(0);box-shadow:0 -.83em 0 -.4em #fff,0 -.83em 0 -.42em #fff,0 -.83em 0 -.44em #fff,0 -.83em 0 -.46em #fff,0 -.83em 0 -.477em #fff} 5%,95%{box-shadow:0 -.83em 0 -.4em #fff,0 -.83em 0 -.42em #fff,0 -.83em 0 -.44em #fff,0 -.83em 0 -.46em #fff,0 -.83em 0 -.477em #fff} 10%,59%{box-shadow:0 -.83em 0 -.4em #fff,-.087em -.825em 0 -.42em #fff,-.173em -.812em 0 -.44em #fff,-.256em -.789em 0 -.46em #fff,-.297em -.775em 0 -.477em #fff} 20%{box-shadow:0 -.83em 0 -.4em #fff,-.338em -.758em 0 -.42em #fff,-.555em -.617em 0 -.44em #fff,-.671em -.488em 0 -.46em #fff,-.749em -.34em 0 -.477em #fff} 38%{box-shadow:0 -.83em 0 -.4em #fff,-.377em -.74em 0 -.42em #fff,-.645em -.522em 0 -.44em #fff,-.775em -.297em 0 -.46em #fff,-.82em -.09em 0 -.477em #fff} 100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);box-shadow:0 -.83em 0 -.4em #fff,0 -.83em 0 -.42em #fff,0 -.83em 0 -.44em #fff,0 -.83em 0 -.46em #fff,0 -.83em 0 -.477em #fff} } @keyframes load18{ 0%{-webkit-transform:rotate(0);transform:rotate(0);box-shadow:0 -.83em 0 -.4em #fff,0 -.83em 0 -.42em #fff,0 -.83em 0 -.44em #fff,0 -.83em 0 -.46em #fff,0 -.83em 0 -.477em #fff} 5%,95%{box-shadow:0 -.83em 0 -.4em #fff,0 -.83em 0 -.42em #fff,0 -.83em 0 -.44em #fff,0 -.83em 0 -.46em #fff,0 -.83em 0 -.477em #fff} 10%,59%{box-shadow:0 -.83em 0 -.4em #fff,-.087em -.825em 0 -.42em #fff,-.173em -.812em 0 -.44em #fff,-.256em -.789em 0 -.46em #fff,-.297em -.775em 0 -.477em #fff} 20%{box-shadow:0 -.83em 0 -.4em #fff,-.338em -.758em 0 -.42em #fff,-.555em -.617em 0 -.44em #fff,-.671em -.488em 0 -.46em #fff,-.749em -.34em 0 -.477em #fff} 38%{box-shadow:0 -.83em 0 -.4em #fff,-.377em -.74em 0 -.42em #fff,-.645em -.522em 0 -.44em #fff,-.775em -.297em 0 -.46em #fff,-.82em -.09em 0 -.477em #fff} 100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);box-shadow:0 -.83em 0 -.4em #fff,0 -.83em 0 -.42em #fff,0 -.83em 0 -.44em #fff,0 -.83em 0 -.46em #fff,0 -.83em 0 -.477em #fff} } /******************** Preloader Demo-19 *******************/ .loader19{width:160px;height:160px;margin:20px auto;position:relative} .loader19 .loader-inner{position:absolute;top:50%;left:50%} .loader19 .box-2{left:2px;top:2px;-webkit-animation-name:loading-19;animation-name:loading-19} .loader19 .box-1{width:74px;height:74px;border-radius:4px;-webkit-animation-name:loading-192;animation-name:loading-192;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:steps(4);animation-timing-function:steps(4)} .loader19 .box-2{-webkit-animation-duration:.5s;animation-duration:.5s} .box-1{position:absolute;color:#006aa4;border:2px solid;-webkit-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite} .box-2,.loader19 .box-1:after,.loader19 .box-1:before{position:absolute;width:32px;height:32px;border-radius:4px;background:#e3b23c} .loader19 .box-1:after,.loader19 .box-1:before{bottom:2px;content:""} .loader19 .box-1:before{left:2px} .loader19 .box-1:after{right:2px} .box-2{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite} @-webkit-keyframes loading-19{ 33%{left:2px} 100%,67%{left:36px} } @keyframes loading-19{ 33%{left:2px} 100%,67%{left:36px} } @-webkit-keyframes loading-192{ to{-webkit-transform:translate(-50%,-50%) rotate(-405deg);transform:translate(-50%,-50%) rotate(-405deg)} } @keyframes loading-192{ to{-webkit-transform:translate(-50%,-50%) rotate(-405deg);transform:translate(-50%,-50%) rotate(-405deg)} } /******************** Preloader Demo-20 *******************/ .loader20,.loader20:after,.loader20:before{border-radius:50%} .loader20:after,.loader20:before{position:absolute;content:''} .loader20:before{width:5.2em;height:10.2em;background:#1abc9c;border-radius:10.2em 0 0 10.2em;top:-.1em;left:-.1em;-webkit-transform-origin:5.2em 5.1em;transform-origin:5.2em 5.1em;-webkit-animation:load20 2s infinite ease 1.5s;animation:load20 2s infinite ease 1.5s} .loader20{font-size:11px;text-indent:-99999em;margin:55px auto;position:relative;width:10em;height:10em;box-shadow:inset 0 0 0 1em #fff;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)} .loader20:after{width:5.2em;height:10.2em;background:#1abc9c;border-radius:0 10.2em 10.2em 0;top:-.1em;left:5.1em;-webkit-transform-origin:0 5.1em;transform-origin:0 5.1em;-webkit-animation:load20 2s infinite ease;animation:load20 2s infinite ease} @-webkit-keyframes load20{ 0%{-webkit-transform:rotate(0);transform:rotate(0)} 100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)} } @keyframes load20{ 0%{-webkit-transform:rotate(0);transform:rotate(0)} 100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)} }

Related: See More


Questions / Comments: