.spinner1 { width: 40px; height: 40px; position: relative; } .double-bounce1, .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: #fff; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: bounce 2.0s infinite ease-in-out; animation: bounce 2.0s infinite ease-in-out; } .double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } } .spinner2 { width: 40px; height: 40px; position: relative; } .loader1 > div, .loader2 > div, .loader3 > div { width: 6px; height: 6px; background-color: #fff; border-radius: 100%; position: absolute; -webkit-animation: bouncedelay 1.2s infinite ease-in-out; animation: bouncedelay 1.2s infinite ease-in-out; /* Prevent first frame from flickering when animation starts */ -webkit-animation-fill-mode: both; animation-fill-mode: both; } .spinner2 .spinner-loader { position: absolute; width: 100%; height: 100%; } .loader2 { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .loader3 { -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); } .circle1 { top: 0; left: 0; } .circle2 { top: 0; right: 0; } .circle3 { right: 0; bottom: 0; } .circle4 { left: 0; bottom: 0; } .loader2 .circle1 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .loader3 .circle1 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .loader1 .circle2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .loader2 .circle2 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .loader3 .circle2 { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .loader1 .circle3 { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .loader2 .circle3 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .loader3 .circle3 { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .loader1 .circle4 { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .loader2 .circle4 { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .loader3 .circle4 { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } } @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 40% { transform: scale(1.0); -webkit-transform: scale(1.0); } } .spinner3 { width: 40px; height: 40px; position: relative; -webkit-animation: rotate 2.0s infinite linear; animation: rotate 2.0s infinite linear; } .dot1, .dot2 { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; background-color: #fff; border-radius: 100%; -webkit-animation: bounce 2.0s infinite ease-in-out; animation: bounce 2.0s infinite ease-in-out; } .dot2 { top: auto; bottom: 0px; -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }} @keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }} @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } } .spinner4 { width: 30px; height: 30px; background-color: #fff; -webkit-animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } @keyframes rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } .spinner5 { width: 32px; height: 32px; position: relative; } .cube1, .cube2 { background-color: #fff; width: 10px; height: 10px; position: absolute; top: 0; left: 0; -webkit-animation: cubemove 1.8s infinite ease-in-out; animation: cubemove 1.8s infinite ease-in-out; } .cube2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } @-webkit-keyframes cubemove { 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) } 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) } 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) } 100% { -webkit-transform: rotate(-360deg) } } @keyframes cubemove { 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); } } .spinner6 { width: 50px; height: 30px; text-align: center; } .spinner6 > div { background-color: #fff; height: 100%; width: 6px; margin-left:2px; display: inline-block; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; } .spinner6 .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner6 .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner6 .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner6 .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } } .spinner7 { width: 90px; height: 30px; text-align: center; } .spinner7 > div { background-color: #fff; height: 15px; width: 15px; margin-left:3px; border-radius: 50%; display: inline-block; -webkit-animation: stretchdelay 0.7s infinite ease-in-out; animation: stretchdelay 0.7s infinite ease-in-out; } .spinner7 .circ2 { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .spinner7 .circ3 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .spinner7 .circ4 { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .spinner7 .circ5 { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: translateY(-10px) } 20% { -webkit-transform: translateY(-20px) } } @keyframes stretchdelay { 0%, 40%, 100% { transform: translateY(-10px); -webkit-transform: translateY(-10px); } 20% { transform: translateY(-20px); -webkit-transform: translateY(-20px); } } /* Insertamos el loader para poder llamarlo */ .container-lds-roller { display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left:0; width: 100%; height: 100%; background: #222222; opacity: 0.5; z-index: 1000; } .lds-roller { display: inline-block; position: relative; width: 80px; height: 80px; background: rgba(200, 200, 200, 0.3); border-radius: 4rem; } .lds-roller div { animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 40px 40px; } .lds-roller div:after { content: " "; display: block; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: black; margin: -4px 0 0 -4px; } .lds-roller div:nth-child(1) { animation-delay: -0.036s; } .lds-roller div:nth-child(1):after { top: 63px; left: 63px; } .lds-roller div:nth-child(2) { animation-delay: -0.072s; } .lds-roller div:nth-child(2):after { top: 68px; left: 56px; } .lds-roller div:nth-child(3) { animation-delay: -0.108s; } .lds-roller div:nth-child(3):after { top: 71px; left: 48px; } .lds-roller div:nth-child(4) { animation-delay: -0.144s; } .lds-roller div:nth-child(4):after { top: 72px; left: 40px; } .lds-roller div:nth-child(5) { animation-delay: -0.18s; } .lds-roller div:nth-child(5):after { top: 71px; left: 32px; } .lds-roller div:nth-child(6) { animation-delay: -0.216s; } .lds-roller div:nth-child(6):after { top: 68px; left: 24px; } .lds-roller div:nth-child(7) { animation-delay: -0.252s; } .lds-roller div:nth-child(7):after { top: 63px; left: 17px; } .lds-roller div:nth-child(8) { animation-delay: -0.288s; } .lds-roller div:nth-child(8):after { top: 56px; left: 12px; } @keyframes lds-roller { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .dataTables_processing { background: transparent !important; border:none; /*importante cambio */ } html.fixed.sidebar-left-collapsed .content-body { margin-left: 2rem; }