Файловый менеджер

Файловый менеджер - Редактировать - /home/infrafs/www/wp-content/themes/trackstore/assets/css/scss/_spinners.scss

Назад
.eltd-st-loader { position: absolute; top: 50%; left: 50%; z-index: 2100; @include eltdTransform(translate(-50%,-50%)); } .eltd-st-loader1 { position: relative; display: inline-block; width: 100%; height: 100%; } .eltd-st-loader2 { margin: -50% 0 0 -50%; } /* trackstore laoder - start / @include keyframes(running-line){ 0% { transform:scale(0,1); } 100% { transform:scale(1,1); } } @include keyframes(close-line){ 0% { transform:scale(1,1); } 100% { transform:scale(0,1); } } .eltd-trackstore-loader { position:relative; width:400px; margin:0 auto; max-width:80%; .eltd-trackstore-loader-counter { text-align:center; letter-spacing:2px; z-index: 20; color:#fff; font-size:20px; line-height: 90px; position:relative; font-family: "Roboto Condensed",sans-serif; font-weight:bold; color:#000; @include eltdTransition(opacity .5s ease-in-out); } .eltd-trackstore-loader-line-holder { position:absolute; bottom:0; left:0; width:100%; height:90px; transform-origin:top right; .eltd-trackstore-loader-line { position:absolute; height:15px; left:0; width:100%; top:0; transform-origin:top left; background:$first-main-color; transform:scale(0,1); @include eltdTransition(all .5s ease-in-out); &.line1 { top:0; } &.line2 { top:15px; } &.line3 { top:30px; } &.line4 { top:45px; } &.line5 { top:60px; } &.line6 { top:75px; } } } &.eltd-preloader-started { .eltd-trackstore-loader-line { &.line1 { @include eltdAnimation(running-line .75s 0s 1 linear forwards); } &.line2 { @include eltdAnimation(running-line .75s .25s 1 linear forwards); } &.line3 { @include eltdAnimation(running-line .75s .5s 1 linear forwards); } &.line4 { @include eltdAnimation(running-line .75s .75s 1 linear forwards); } &.line5 { @include eltdAnimation(running-line .75s 1s 1 linear forwards); } &.line6 { @include eltdAnimation(running-line .75s 1.25s 1 linear forwards); } } } &.eltd-preloader-finished { .eltd-trackstore-loader-counter { opacity:0; } .eltd-trackstore-loader-line-holder { @include eltdAnimation(close-line .5s 0s 1 linear forwards); } } } / rotate circles - start / .eltd-rotate-circles { width: 60px; height: 20px; >div { background-color: #333; display: inline-block; width: 12px; height: 12px; margin: 4px; border-radius: 100%; opacity: 0; -webkit-animation: ball-fall 1.5s ease infinite; animation: ball-fall 1.5s ease infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; &:nth-child(1) { -webkit-animation-delay: -200ms; animation-delay: -200ms; } &:nth-child(2) { -webkit-animation-delay: -100ms; animation-delay: -100ms; } &:nth-child(3) { -webkit-animation-delay: 0ms; animation-delay: 0ms; } } } @include keyframes(ball-fall){ 0% { opacity:0; @include eltdTransform(translateY(-145%)); } 10% { opacity:.5 } 20% { opacity:1; @include eltdTransform(translateY(0)); } 80% { opacity:1; @include eltdTransform(translateY(0)); } 90% { opacity:.5 } 100% { opacity:0; @include eltdTransform(translateY(145%)); } } / rotate circles - end / / pulse - start / .eltd-st-loader .pulse { width: 32px; height: 32px; margin: -16px 0 0 -16px; background-color: $first-main-color; border-radius: 16px; -webkit-animation: scaleout 1.0s infinite ease-in-out; animation: scaleout 1.0s infinite ease-in-out; } @-webkit-keyframes scaleout { 0% { -webkit-transform: scale(0); } 100% { -webkit-transform: scale(1); opacity: 0; } } @-moz-keyframes scaleout { 0% { -moz-transform: scale(0); } 100% { -moz-transform: scale(1); opacity: 0; } } @-ms-keyframes scaleout { 0% { -ms-transform: scale(0); } 100% { -ms-transform: scale(1); opacity: 0; } } @-o-keyframes scaleout { 0% { -o-transform: scale(0); } 100% { -o-transform: scale(1); opacity: 0; } } @keyframes scaleout { 0% { transform: scale(0); -webkit-transform: scale(0); } 100% { transform: scale(1); -webkit-transform: scale(1); opacity: 0; } } / pulse - end / / double pulse - start / .eltd-st-loader .double_pulse { width: 40px; height: 40px; margin: -20px 0 0 -20px; position: relative; } .eltd-st-loader .double_pulse .double-bounce1, .eltd-st-loader .double_pulse .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: $first-main-color; 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; } .eltd-st-loader .double_pulse .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); } } / double pulse - end / / cube - start / .eltd-st-loader .cube { width: 60px; height: 60px; margin: -30px 0 0 -30px; background-color: $first-main-color; -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); } } / cube - end / / rotating cubes - start / .eltd-st-loader .rotating_cubes { width: 32px; height: 32px; margin: -16px 0 0 -16px; position: relative; } .eltd-st-loader .rotating_cubes .cube1, .eltd-st-loader .rotating_cubes .cube2 { background-color: $first-main-color; 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; } .eltd-st-loader .rotating_cubes .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); } } / rotating cubes - end / / stripes - start / .eltd-st-loader .stripes { width: 50px; height: 60px; margin: -30px 0 0 -25px; text-align: center; font-size: 10px; } .eltd-st-loader .stripes > div { background-color: $first-main-color; height: 100%; width: 6px; display: inline-block; margin: 0 3px 0 0; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; } .eltd-st-loader .stripes .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .eltd-st-loader .stripes .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .eltd-st-loader .stripes .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .eltd-st-loader .stripes .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); } } / stripes - end / / wave - start / .eltd-st-loader .wave { width: 72px; text-align: center; margin: -9px 0 0 -36px; } .eltd-st-loader .wave > div { width: 18px; height: 18px; background-color: $first-main-color; margin: 0 3px 0 0; border-radius: 100%; display: inline-block; -webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; / Prevent first frame from flickering when animation starts / -webkit-animation-fill-mode: both; animation-fill-mode: both; } .eltd-st-loader .wave .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .eltd-st-loader .wave .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-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); } } / wave - end / / two_rotating_circles - start / .eltd-st-loader .two_rotating_circles { width: 40px; height: 40px; margin: -20px 0 0 -20px; position: relative; text-align: center; -webkit-animation: rotatecircles 2.0s infinite linear; animation: rotatecircles 2.0s infinite linear; } .eltd-st-loader .two_rotating_circles .dot1, .eltd-st-loader .two_rotating_circles .dot2 { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; background-color: $first-main-color; border-radius: 100%; -webkit-animation: bounce 2.0s infinite ease-in-out; animation: bounce 2.0s infinite ease-in-out; } .eltd-st-loader .two_rotating_circles .dot2 { top: auto; bottom: 0; -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes rotatecircles { 100% { -webkit-transform: rotate(360deg) } } @keyframes rotatecircles { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) } } / two_rotating_circles - end / / five_rotating_circles - start / .eltd-st-loader .five_rotating_circles { width: 60px; height: 60px; margin: -30px 0 0 -30px; position: relative; } .eltd-st-loader .five_rotating_circles .container1 > div, .eltd-st-loader .five_rotating_circles .container2 > div, .eltd-st-loader .five_rotating_circles .container3 > div { width: 12px; height: 12px; background-color: $first-main-color; 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; } .eltd-st-loader .five_rotating_circles .spinner-container { position: absolute; width: 100%; height: 100%; } .eltd-st-loader .five_rotating_circles .container2 { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .eltd-st-loader .five_rotating_circles .container3 { -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); } .eltd-st-loader .five_rotating_circles .circle1 { top: 0; left: 0; } .eltd-st-loader .five_rotating_circles .circle2 { top: 0; right: 0; } .eltd-st-loader .five_rotating_circles .circle3 { right: 0; bottom: 0; } .eltd-st-loader .five_rotating_circles .circle4 { left: 0; bottom: 0; } .eltd-st-loader .five_rotating_circles .container2 .circle1 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .eltd-st-loader .five_rotating_circles .container3 .circle1 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .eltd-st-loader .five_rotating_circles .container1 .circle2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .eltd-st-loader .five_rotating_circles .container2 .circle2 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .eltd-st-loader .five_rotating_circles .container3 .circle2 { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .eltd-st-loader .five_rotating_circles .container1 .circle3 { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .eltd-st-loader .five_rotating_circles .container2 .circle3 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .eltd-st-loader .five_rotating_circles .container3 .circle3 { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .eltd-st-loader .five_rotating_circles .container1 .circle4 { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .eltd-st-loader .five_rotating_circles .container2 .circle4 { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .eltd-st-loader .five_rotating_circles .container3 .circle4 { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } / five_rotating_circles - end / / atom - start / .eltd-st-loader .atom { width: 100px; height: 100px; margin: -50px 0 0 -50px; position: relative; } .eltd-st-loader .atom .ball-1 { height: 50%; width: 50%; left: 50%; top: 50%; position: absolute; z-index: 1; -webkit-animation: atom_shrink 4.5s infinite linear; -moz-animation: atom_shrink 4.5s infinite linear; -o-animation: atom_shrink 4.5s infinite linear; animation: atom_shrink 4.5s infinite linear; } .eltd-st-loader .atom .ball-1:before { content: ''; background: $first-main-color; border-radius: 50%; height: 100%; width: 100%; position: absolute; top: -50%; left: -50%; } .eltd-st-loader .atom .ball-2, .eltd-st-loader .atom .ball-3, .eltd-st-loader .atom .ball-4 { position: absolute; width: 100%; height: 100%; z-index: 0; } .eltd-st-loader .atom .ball-2:before, .eltd-st-loader .atom .ball-3:before, .eltd-st-loader .atom .ball-4:before { content: ''; height: 20px; width: 20px; border-radius: 50%; background: $first-main-color; top: 0; left: 0; margin: 0 auto; position: absolute; } .eltd-st-loader .atom .ball-2 { -webkit-animation: atom_zindex 1.5s 0.75s infinite steps(2, end); -moz-animation: atom_zindex 1.5s 0.75s infinite steps(2, end); -o-animation: atom_zindex 1.5s 0.75s infinite steps(2, end); animation: atom_zindex 1.5s 0.75s infinite steps(2, end); } .eltd-st-loader .atom .ball-3 { -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); -webkit-animation: atom_zindex 1.5s -0.25s infinite steps(2, end); -moz-animation: atom_zindex 1.5s -0.25s infinite steps(2, end); -o-animation: atom_zindex 1.5s -0.25s infinite steps(2, end); animation: atom_zindex 1.5s -0.25s infinite steps(2, end); } .eltd-st-loader .atom .ball-4 { -webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg); -webkit-animation: atom_zindex 1.5s 0.25s infinite steps(2, end); -moz-animation: atom_zindex 1.5s 0.25s infinite steps(2, end); -o-animation: atom_zindex 1.5s 0.25s infinite steps(2, end); animation: atom_zindex 1.5s 0.25s infinite steps(2, end); } .eltd-st-loader .atom .ball-2:before { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation: atom_position 1.5s infinite ease, atom_size 1.5s -1.125s infinite ease; -moz-animation: atom_position 1.5s infinite ease, atom_size 1.5s -1.125s infinite ease; -o-animation: atom_position 1.5s infinite ease, atom_size 1.5s -1.125s infinite ease; animation: atom_position 1.5s infinite ease, atom_size 1.5s -1.125s infinite ease; } .eltd-st-loader .atom .ball-3:before { -webkit-animation: atom_position 1.5s -1s infinite ease, atom_size 1.5s -0.75s infinite ease; -moz-animation: atom_position 1.5s -1s infinite ease, atom_size 1.5s -0.75s infinite ease; -o-animation: atom_position 1.5s -1s infinite ease, atom_size 1.5s -0.75s infinite ease; animation: atom_position 1.5s -1s infinite ease, atom_size 1.5s -0.75s infinite ease; } .eltd-st-loader .atom .ball-4:before { -webkit-animation: atom_position 1.5s -0.5s infinite ease, atom_size 1.5s -0.125s infinite ease; -moz-animation: atom_position 1.5s -0.5s infinite ease, atom_size 1.5s -0.125s infinite ease; -o-animation: atom_position 1.5s -0.5s infinite ease, atom_size 1.5s -0.125s infinite ease; animation: atom_position 1.5s -0.5s infinite ease, atom_size 1.5s -0.125s infinite ease; } @-webkit-keyframes atom_position { 50% { top: 80px; left: 80px; } } @-moz-keyframes atom_position { 50% { top: 80px; left: 80px; } } @-o-keyframes atom_position { 50% { top: 80px; left: 80px; } } @keyframes atom_position { 50% { top: 80px; left: 80px; } } @-webkit-keyframes atom_size { 50% { -webkit-transform: scale(0.5, 0.5); } } @-moz-keyframes atom_size { 50% { -moz-transform: scale(0.5, 0.5); } } @-o-keyframes atom_size { 50% { -o-transform: scale(0.5, 0.5); } } @keyframes atom_size { 50% { transform: scale(0.5, 0.5); } } @-webkit-keyframes atom_zindex { 100% { z-index: 10; } } @-moz-keyframes atom_zindex { 100% { z-index: 10; } } @-o-keyframes atom_zindex { 100% { z-index: 10; } } @keyframes atom_zindex { 100% { z-index: 10; } } @-webkit-keyframes atom_shrink { 50% { -webkit-transform: scale(0.9, 0.9) } } @-moz-keyframes atom_shrink { 50% { -moz-transform: scale(0.9, 0.9) } } @-o-keyframes atom_shrink { 50% { -o-transform: scale(0.9, 0.9) } } @keyframes atom_shrink { 50% { transform: scale(0.9, 0.9) } } / atom - end / / clock - start/ .eltd-st-loader .clock { width: 50px; height: 50px; margin: -25px 0 0 -25px; position: relative; -webkit-animation: clock 8s infinite steps(8); -moz-animation: clock 8s infinite steps(8); -o-animation: clock 8s infinite steps(8); animation: clock 8s infinite steps(8); } .eltd-st-loader .clock .ball { height: 50px; width: 50px; position: absolute; } .eltd-st-loader .clock .ball:before { content: ''; border-radius: 50%; height: 18.31501832px; width: 18.31501832px; position: absolute; background: $first-main-color; } .eltd-st-loader .clock .ball-1 { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); -webkit-animation: clock1 1s ease-in infinite; -moz-animation: clock1 1s ease-in infinite; -o-animation: clock1 1s ease-in infinite; animation: clock1 1s ease-in infinite; } .eltd-st-loader .clock .ball-2 { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -webkit-animation: clock2 1s ease-in infinite; -moz-animation: clock2 1s ease-in infinite; -o-animation: clock2 1s ease-in infinite; animation: clock2 1s ease-in infinite; } .eltd-st-loader .clock .ball-3 { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-animation: clock3 1s ease-in infinite; -moz-animation: clock3 1s ease-in infinite; -o-animation: clock3 1s ease-in infinite; animation: clock3 1s ease-in infinite; } .eltd-st-loader .clock .ball-4 { -webkit-animation: clock4 1s ease-in infinite; -moz-animation: clock4 1s ease-in infinite; -o-animation: clock4 1s ease-in infinite; animation: clock4 1s ease-in infinite; } @-webkit-keyframes clock { 100% { -webkit-transform: rotate(360deg); } } @-moz-keyframes clock { 100% { -moz-transform: rotate(360deg); } } @-o-keyframes clock { 100% { -o-transform: rotate(360deg); } } @keyframes clock { 100% { transform: rotate(360deg); } } @-webkit-keyframes clock1 { 0% { -webkit-transform: rotate(-135deg); } 30% { -webkit-transform: rotate(-450deg); } 100% { -webkit-transform: rotate(-450deg); } } @-moz-keyframes clock1 { 0% { -moz-transform: rotate(-135deg); } 30% { -moz-transform: rotate(-450deg); } 100% { -moz-transform: rotate(-450deg); } } @-o-keyframes clock1 { 0% { -o-transform: rotate(-135deg); } 30% { -o-transform: rotate(-450deg); } 100% { -o-transform: rotate(-450deg); } } @keyframes clock1 { 0% { transform: rotate(-135deg); } 30% { transform: rotate(-450deg); } 100% { transform: rotate(-450deg); } } @-webkit-keyframes clock2 { 5% { -webkit-transform: rotate(-90deg); } 35% { -webkit-transform: rotate(-405deg); } 100% { -webkit-transform: rotate(-405deg); } } @-moz-keyframes clock2 { 5% { -moz-transform: rotate(-90deg); } 35% { -moz-transform: rotate(-405deg); } 100% { -moz-transform: rotate(-405deg); } } @-o-keyframes clock2 { 5% { -o-transform: rotate(-90deg); } 35% { -o-transform: rotate(-405deg); } 100% { -o-transform: rotate(-405deg); } } @keyframes clock2 { 5% { transform: rotate(-90deg); } 35% { transform: rotate(-405deg); } 100% { transform: rotate(-405deg); } } @-webkit-keyframes clock3 { 10% { -webkit-transform: rotate(-45deg); } 40% { -webkit-transform: rotate(-360deg); } 100% { -webkit-transform: rotate(-360deg); } } @-moz-keyframes clock3 { 10% { -moz-transform: rotate(-45deg); } 40% { -moz-transform: rotate(-360deg); } 100% { -moz-transform: rotate(-360deg); } } @-o-keyframes clock3 { 10% { -o-transform: rotate(-45deg); } 40% { -o-transform: rotate(-360deg); } 100% { -o-transform: rotate(-360deg); } } @keyframes clock3 { 10% { transform: rotate(-45deg); } 40% { transform: rotate(-360deg); } 100% { transform: rotate(-360deg); } } @-webkit-keyframes clock4 { 15% { -webkit-transform: rotate(0deg); } 45% { -webkit-transform: rotate(-315deg); } 100% { -webkit-transform: rotate(-315deg); } } @-moz-keyframes clock4 { 15% { -moz-transform: rotate(0deg); } 45% { -moz-transform: rotate(-315deg); } 100% { -moz-transform: rotate(-315deg); } } @-o-keyframes clock4 { 15% { -o-transform: rotate(0deg); } 45% { -o-transform: rotate(-315deg); } 100% { -o-transform: rotate(-315deg); } } @keyframes clock4 { 15% { transform: rotate(0deg); } 45% { transform: rotate(-315deg); } 100% { transform: rotate(-315deg); } } / clock - end/ / mitosis - start/ .eltd-st-loader .mitosis { height: 50px; width: 50px; margin: -25px 0 0 -25px; position: relative; -webkit-animation: mitosis_invert 2s infinite steps(2, end); -moz-animation: mitosis_invert 2s infinite steps(2, end); -o-animation: mitosis_invert 2s infinite steps(2, end); animation: mitosis_invert 2s infinite steps(2, end); } .eltd-st-loader .mitosis .ball { height: 100%; width: 100%; position: absolute; border-radius: 50%; top: 0; left: 0; background: $first-main-color; } .eltd-st-loader .mitosis .ball-1 { -webkit-animation: mitosis_ball1 1s infinite alternate linear; -moz-animation: mitosis_ball1 1s infinite alternate linear; -o-animation: mitosis_ball1 1s infinite alternate linear; animation: mitosis_ball1 1s infinite alternate linear; } .eltd-st-loader .mitosis .ball-2 { -webkit-animation: mitosis_ball2 1s infinite alternate linear; -moz-animation: mitosis_ball2 1s infinite alternate linear; -o-animation: mitosis_ball2 1s infinite alternate linear; animation: mitosis_ball2 1s infinite alternate linear; } .eltd-st-loader .mitosis .ball-3 { -webkit-animation: mitosis_ball3 1s infinite alternate linear; -moz-animation: mitosis_ball3 1s infinite alternate linear; -o-animation: mitosis_ball3 1s infinite alternate linear; animation: mitosis_ball3 1s infinite alternate linear; } .eltd-st-loader .mitosis .ball-4 { -webkit-animation: mitosis_ball4 1s infinite alternate linear; -moz-animation: mitosis_ball4 1s infinite alternate linear; -o-animation: mitosis_ball4 1s infinite alternate linear; animation: mitosis_ball4 1s infinite alternate linear; } @-webkit-keyframes mitosis_invert { 100% { -webkit-transform: rotate(180deg); } } @-moz-keyframes mitosis_invert { 100% { -moz-transform: rotate(180deg); } } @-o-keyframes mitosis_invert { 100% { -o-transform: rotate(180deg); } } @keyframes mitosis_invert { 100% { transform: rotate(180deg); } } @-webkit-keyframes mitosis_ball1 { 12% { -webkit-transform: none; } 26% { -webkit-transform: translateX(25%) scale(1, 0.8); } 40% { -webkit-transform: translateX(50%) scale(0.8, 0.8); } 60% { -webkit-transform: translateX(50%) scale(0.8, 0.8); } 74% { -webkit-transform: translate(50%, 25%) scale(0.6, 0.8); } 88% { -webkit-transform: translate(50%, 50%) scale(0.6, 0.6); } 100% { -webkit-transform: translate(50%, 50%) scale(0.6, 0.6); } } @-moz-keyframes mitosis_ball1 { 12% { -moz-transform: none; } 26% { -moz-transform: translateX(25%) scale(1, 0.8); } 40% { -moz-transform: translateX(50%) scale(0.8, 0.8); } 60% { -moz-transform: translateX(50%) scale(0.8, 0.8); } 74% { -moz-transform: translate(50%, 25%) scale(0.6, 0.8); } 88% { -moz-transform: translate(50%, 50%) scale(0.6, 0.6); } 100% { -moz-transform: translate(50%, 50%) scale(0.6, 0.6); } } @-o-keyframes mitosis_ball1 { 12% { -o-transform: none; } 26% { -o-transform: translateX(25%) scale(1, 0.8); } 40% { -o-transform: translateX(50%) scale(0.8, 0.8); } 60% { -o-transform: translateX(50%) scale(0.8, 0.8); } 74% { -o-transform: translate(50%, 25%) scale(0.6, 0.8); } 88% { -o-transform: translate(50%, 50%) scale(0.6, 0.6); } 100% { -o-transform: translate(50%, 50%) scale(0.6, 0.6); } } @keyframes mitosis_ball1 { 12% { transform: none; } 26% { transform: translateX(25%) scale(1, 0.8); } 40% { transform: translateX(50%) scale(0.8, 0.8); } 60% { transform: translateX(50%) scale(0.8, 0.8); } 74% { transform: translate(50%, 25%) scale(0.6, 0.8); } 88% { transform: translate(50%, 50%) scale(0.6, 0.6); } 100% { transform: translate(50%, 50%) scale(0.6, 0.6); } } @-webkit-keyframes mitosis_ball2 { 12% { -webkit-transform: none; } 26% { -webkit-transform: translateX(25%) scale(1, 0.8); } 40% { -webkit-transform: translateX(50%) scale(0.8, 0.8); } 60% { -webkit-transform: translateX(50%) scale(0.8, 0.8); } 74% { -webkit-transform: translate(50%, -25%) scale(0.6, 0.8); } 88% { -webkit-transform: translate(50%, -50%) scale(0.6, 0.6); } 100% { -webkit-transform: translate(50%, -50%) scale(0.6, 0.6); } } @-moz-keyframes mitosis_ball2 { 12% { -moz-transform: none; } 26% { -moz-transform: translateX(25%) scale(1, 0.8); } 40% { -moz-transform: translateX(50%) scale(0.8, 0.8); } 60% { -moz-transform: translateX(50%) scale(0.8, 0.8); } 74% { -moz-transform: translate(50%, -25%) scale(0.6, 0.8); } 88% { -moz-transform: translate(50%, -50%) scale(0.6, 0.6); } 100% { -moz-transform: translate(50%, -50%) scale(0.6, 0.6); } } @-o-keyframes mitosis_ball2 { 12% { -o-transform: none; } 26% { -o-transform: translateX(25%) scale(1, 0.8); } 40% { -o-transform: translateX(50%) scale(0.8, 0.8); } 60% { -o-transform: translateX(50%) scale(0.8, 0.8); } 74% { -o-transform: translate(50%, -25%) scale(0.6, 0.8); } 88% { -o-transform: translate(50%, -50%) scale(0.6, 0.6); } 100% { -o-transform: translate(50%, -50%) scale(0.6, 0.6); } } @keyframes mitosis_ball2 { 12% { transform: none; } 26% { transform: translateX(25%) scale(1, 0.8); } 40% { transform: translateX(50%) scale(0.8, 0.8); } 60% { transform: translateX(50%) scale(0.8, 0.8); } 74% { transform: translate(50%, -25%) scale(0.6, 0.8); } 88% { transform: translate(50%, -50%) scale(0.6, 0.6); } 100% { transform: translate(50%, -50%) scale(0.6, 0.6); } } @-webkit-keyframes mitosis_ball3 { 12% { -webkit-transform: none; } 26% { -webkit-transform: translateX(-25%) scale(1, 0.8); } 40% { -webkit-transform: translateX(-50%) scale(0.8, 0.8); } 60% { -webkit-transform: translateX(-50%) scale(0.8, 0.8); } 74% { -webkit-transform: translate(-50%, 25%) scale(0.6, 0.8); } 88% { -webkit-transform: translate(-50%, 50%) scale(0.6, 0.6); } 100% { -webkit-transform: translate(-50%, 50%) scale(0.6, 0.6); } } @-moz-keyframes mitosis_ball3 { 12% { -moz-transform: none; } 26% { -moz-transform: translateX(-25%) scale(1, 0.8); } 40% { -moz-transform: translateX(-50%) scale(0.8, 0.8); } 60% { -moz-transform: translateX(-50%) scale(0.8, 0.8); } 74% { -moz-transform: translate(-50%, 25%) scale(0.6, 0.8); } 88% { -moz-transform: translate(-50%, 50%) scale(0.6, 0.6); } 100% { -moz-transform: translate(-50%, 50%) scale(0.6, 0.6); } } @-o-keyframes mitosis_ball3 { 12% { -o-transform: none; } 26% { -o-transform: translateX(-25%) scale(1, 0.8); } 40% { -o-transform: translateX(-50%) scale(0.8, 0.8); } 60% { -o-transform: translateX(-50%) scale(0.8, 0.8); } 74% { -o-transform: translate(-50%, 25%) scale(0.6, 0.8); } 88% { -o-transform: translate(-50%, 50%) scale(0.6, 0.6); } 100% { -o-transform: translate(-50%, 50%) scale(0.6, 0.6); } } @keyframes mitosis_ball3 { 12% { transform: none; } 26% { transform: translateX(-25%) scale(1, 0.8); } 40% { transform: translateX(-50%) scale(0.8, 0.8); } 60% { transform: translateX(-50%) scale(0.8, 0.8); } 74% { transform: translate(-50%, 25%) scale(0.6, 0.8); } 88% { transform: translate(-50%, 50%) scale(0.6, 0.6); } 100% { transform: translate(-50%, 50%) scale(0.6, 0.6); } } @-webkit-keyframes mitosis_ball4 { 12% { -webkit-transform: none; } 26% { -webkit-transform: translateX(-25%) scale(1, 0.8); } 40% { -webkit-transform: translateX(-50%) scale(0.8, 0.8); } 60% { -webkit-transform: translateX(-50%) scale(0.8, 0.8); } 74% { -webkit-transform: translate(-50%, -25%) scale(0.6, 0.8); } 88% { -webkit-transform: translate(-50%, -50%) scale(0.6, 0.6); } 100% { -webkit-transform: translate(-50%, -50%) scale(0.6, 0.6); } } @-moz-keyframes mitosis_ball4 { 12% { -moz-transform: none; } 26% { -moz-transform: translateX(-25%) scale(1, 0.8); } 40% { -moz-transform: translateX(-50%) scale(0.8, 0.8); } 60% { -moz-transform: translateX(-50%) scale(0.8, 0.8); } 74% { -moz-transform: translate(-50%, -25%) scale(0.6, 0.8); } 88% { -moz-transform: translate(-50%, -50%) scale(0.6, 0.6); } 100% { -moz-transform: translate(-50%, -50%) scale(0.6, 0.6); } } @-o-keyframes mitosis_ball4 { 12% { -o-transform: none; } 26% { -o-transform: translateX(-25%) scale(1, 0.8); } 40% { -o-transform: translateX(-50%) scale(0.8, 0.8); } 60% { -o-transform: translateX(-50%) scale(0.8, 0.8); } 74% { -o-transform: translate(-50%, -25%) scale(0.6, 0.8); } 88% { -o-transform: translate(-50%, -50%) scale(0.6, 0.6); } 100% { -o-transform: translate(-50%, -50%) scale(0.6, 0.6); } } @keyframes mitosis_ball4 { 12% { transform: none; } 26% { transform: translateX(-25%) scale(1, 0.8); } 40% { transform: translateX(-50%) scale(0.8, 0.8); } 60% { transform: translateX(-50%) scale(0.8, 0.8); } 74% { transform: translate(-50%, -25%) scale(0.6, 0.8); } 88% { transform: translate(-50%, -50%) scale(0.6, 0.6); } 100% { transform: translate(-50%, -50%) scale(0.6, 0.6); } } / mitosis - end/ / lines - start/ .eltd-st-loader .lines { width: 60px; height: 60px; margin: 0 0 0 -30px; } .eltd-st-loader .lines .line1, .eltd-st-loader .lines .line2, .eltd-st-loader .lines .line3, .eltd-st-loader .lines .line4 { margin-left: 10px; position: absolute; width: 60px; height: 4px; background-color: $first-main-color; -webkit-animation: lines_spin 1.5s infinite linear; -webkit-animation-timing-function: ease; } .eltd-st-loader .lines .line2 { -webkit-animation-delay: 0.1s; } .eltd-st-loader .lines .line3 { -webkit-animation-delay: 0.2s; } .eltd-st-loader .lines .line4 { -webkit-animation-delay: 0.3s; } @-webkit-keyframes lines_spin { 100% { -webkit-transform: rotate(360deg); } } @-moz-keyframes lines_spin { 100% { -moz-transform: rotate(360deg); } } @-o-keyframes lines_spin { 100% { -o-transform: rotate(360deg); } } @keyframes lines_spin { 100% { transform: rotate(360deg); } } / lines - end/ / fussion - start/ .eltd-st-loader .fussion { width: 30px; height: 30px; margin: -45px 0 0 -30px; position: relative; } .eltd-st-loader .fussion .ball { height: 40px; width: 40px; left: 50%; top: 50%; background: $first-main-color; border-radius: 50%; float: left; position: absolute; } .eltd-st-loader .fussion .ball-1 { background: $first-main-color; top: 0; left: 50%; -webkit-animation: fussion_ball1 1s 0s ease infinite; -moz-animation: fussion_ball1 1s 0s ease infinite; -o-animation: fussion_ball1 1s 0s ease infinite; animation: fussion_ball1 1s 0s ease infinite; z-index: 1; } .eltd-st-loader .fussion .ball-2 { background: $first-main-color; top: 50%; left: 100%; -webkit-animation: fussion_ball2 1s 0s ease infinite; -moz-animation: fussion_ball2 1s 0s ease infinite; -o-animation: fussion_ball2 1s 0s ease infinite; animation: fussion_ball2 1s 0s ease infinite; z-index: 2; } .eltd-st-loader .fussion .ball-3 { background: $first-main-color; top: 100%; left: 50%; -webkit-animation: fussion_ball3 1s 0s ease infinite; -moz-animation: fussion_ball3 1s 0s ease infinite; -o-animation: fussion_ball3 1s 0s ease infinite; animation: fussion_ball3 1s 0s ease infinite; z-index: 1; } .eltd-st-loader .fussion .ball-4 { background: $first-main-color; top: 50%; left: 0; -webkit-animation: fussion_ball4 1s 0s ease infinite; -moz-animation: fussion_ball4 1s 0s ease infinite; -o-animation: fussion_ball4 1s 0s ease infinite; animation: fussion_ball4 1s 0s ease infinite; z-index: 2; } @-webkit-keyframes fussion_ball1 { 50% { top: -100%; left: 200%; } 100% { top: 50%; left: 100%; z-index: 2; } } @-moz-keyframes fussion_ball1 { 50% { top: -100%; left: 200%; } 100% { top: 50%; left: 100%; z-index: 2; } } @-o-keyframes fussion_ball1 { 50% { top: -100%; left: 200%; } 100% { top: 50%; left: 100%; z-index: 2; } } @keyframes fussion_ball1 { 50% { top: -100%; left: 200%; } 100% { top: 50%; left: 100%; z-index: 2; } } @-webkit-keyframes fussion_ball2 { 50% { top: 200%; left: 200%; } 100% { top: 100%; left: 50%; z-index: 1; } } @-moz-keyframes fussion_ball2 { 50% { top: 200%; left: 200%; } 100% { top: 100%; left: 50%; z-index: 1; } } @-o-keyframes fussion_ball2 { 50% { top: 200%; left: 200%; } 100% { top: 100%; left: 50%; z-index: 1; } } @keyframes fussion_ball2 { 50% { top: 200%; left: 200%; } 100% { top: 100%; left: 50%; z-index: 1; } } @-webkit-keyframes fussion_ball3 { 50% { top: 200%; left: -100%; } 100% { top: 50%; left: 0; z-index: 2; } } @-moz-keyframes fussion_ball3 { 50% { top: 200%; left: -100%; } 100% { top: 50%; left: 0; z-index: 2; } } @-o-keyframes fussion_ball3 { 50% { top: 200%; left: -100%; } 100% { top: 50%; left: 0; z-index: 2; } } @keyframes fussion_ball3 { 50% { top: 200%; left: -100%; } 100% { top: 50%; left: 0; z-index: 2; } } @-webkit-keyframes fussion_ball4 { 50% { top: -100%; left: -100%; } 100% { top: 0; left: 50%; z-index: 1; } } @-moz-keyframes fussion_ball4 { 50% { top: -100%; left: -100%; } 100% { top: 0; left: 50%; z-index: 1; } } @-o-keyframes fussion_ball4 { 50% { top: -100%; left: -100%; } 100% { top: 0; left: 50%; z-index: 1; } } @keyframes fussion_ball4 { 50% { top: -100%; left: -100%; } 100% { top: 0; left: 50%; z-index: 1; } } / fussion - end/ / wave_circles - start/ .eltd-st-loader .wave_circles { width: 150px; height: 30px; margin: -15px 0 0 -75px; } .eltd-st-loader .wave_circles .ball { height: 30px; width: 30px; float: left; background: $first-main-color; border-radius: 50%; margin-right: 10px; } .eltd-st-loader .wave_circles .ball-1 { -webkit-animation: wave_jump3 1.8s infinite ease-out; -moz-animation: wave_jump3 1.8s infinite ease-out; -o-animation: wave_jump3 1.8s infinite ease-out; animation: wave_jump3 1.8s infinite ease-out; } .eltd-st-loader .wave_circles .ball-2 { -webkit-animation: wave_jump2 1.8s infinite ease-out; -moz-animation: wave_jump2 1.8s infinite ease-out; -o-animation: wave_jump2 1.8s infinite ease-out; animation: wave_jump2 1.8s infinite ease-out; } .eltd-st-loader .wave_circles .ball-3 { -webkit-animation: wave_jump1 1.8s infinite ease-out; -moz-animation: wave_jump1 1.8s infinite ease-out; -o-animation: wave_jump1 1.8s infinite ease-out; animation: wave_jump1 1.8s infinite ease-out; } .eltd-st-loader .wave_circles .ball-4 { margin-right: 0; -webkit-animation: wave_wipe 1.8s infinite cubic-bezier(0.5, 0, 0.5, 1); -moz-animation: wave_wipe 1.8s infinite cubic-bezier(0.5, 0, 0.5, 1); -o-animation: wave_wipe 1.8s infinite cubic-bezier(0.5, 0, 0.5, 1); animation: wave_wipe 1.8s infinite cubic-bezier(0.5, 0, 0.5, 1); } @-webkit-keyframes wave_jump1 { 12% { -webkit-transform: translate(20px, -40px); -webkit-animation-timing-function: ease-in; } 24% { -webkit-transform: translate(40px, 0); } 100% { -webkit-transform: translate(40px, 0); } } @-moz-keyframes wave_jump1 { 12% { -moz-transform: translate(20px, -40px); -moz-animation-timing-function: ease-in; } 24% { -moz-transform: translate(40px, 0); } 100% { -moz-transform: translate(40px, 0); } } @-moz-keyframes wave_jump1 { 12% { -o-transform: translate(20px, -40px); -o-animation-timing-function: ease-in; } 24% { -o-transform: translate(40px, 0); } 100% { -o-transform: translate(40px, 0); } } @keyframes wave_jump1 { 12% { transform: translate(20px, -40px); animation-timing-function: ease-in; } 24% { transform: translate(40px, 0); } 100% { transform: translate(40px, 0); } } @-webkit-keyframes wave_jump2 { 12% { -webkit-transform: translate(0, 0); } 24% { -webkit-transform: translate(20px, -40px); -webkit-animation-timing-function: ease-in; } 36% { -webkit-transform: translate(40px, 0); } 100% { -webkit-transform: translate(40px, 0); } } @-moz-keyframes wave_jump2 { 12% { -moz-transform: translate(0, 0); } 24% { -moz-transform: translate(20px, -40px); -moz-animation-timing-function: ease-in; } 36% { -moz-transform: translate(40px, 0); } 100% { -moz-transform: translate(40px, 0); } } @-o-keyframes wave_jump2 { 12% { -o-transform: translate(0, 0); } 24% { -o-transform: translate(20px, -40px); -o-animation-timing-function: ease-in; } 36% { -o-transform: translate(40px, 0); } 100% { -o-transform: translate(40px, 0); } } @keyframes wave_jump2 { 12% { transform: translate(0, 0); } 24% { transform: translate(20px, -40px); animation-timing-function: ease-in; } 36% { transform: translate(40px, 0); } 100% { transform: translate(40px, 0); } } @-webkit-keyframes wave_jump3 { 24% { -webkit-transform: translate(0, 0); } 36% { -webkit-transform: translate(20px, -40px); -webkit-animation-timing-function: ease-in; } 48% { -webkit-transform: translate(40px, 0); } 100% { -webkit-transform: translate(40px, 0); } } @-moz-keyframes wave_jump3 { 24% { -moz-transform: translate(0, 0); } 36% { -moz-transform: translate(20px, -40px); -moz-animation-timing-function: ease-in; } 48% { -moz-transform: translate(40px, 0); } 100% { -moz-transform: translate(40px, 0); } } @-o-keyframes wave_jump3 { 24% { -o-transform: translate(0, 0); } 36% { -o-transform: translate(20px, -40px); -o-animation-timing-function: ease-in; } 48% { -o-transform: translate(40px, 0); } 100% { -o-transform: translate(40px, 0); } } @keyframes wave_jump3 { 24% { transform: translate(0, 0); } 36% { transform: translate(20px, -40px); animation-timing-function: ease-in; } 48% { transform: translate(40px, 0); } 100% { transform: translate(40px, 0); } } @-webkit-keyframes wave_wipe { 48% { -webkit-transform: translateX(-120px); } 100% { -webkit-transform: translateX(-120px); } } @-moz-keyframes wave_wipe { 48% { -moz-transform: translateX(-120px); } 100% { -moz-transform: translateX(-120px); } } @-o-keyframes wave_wipe { 48% { -o-transform: translateX(-120px); } 100% { -o-transform: translateX(-120px); } } @keyframes wave_wipe { 48% { transform: translateX(-120px); } 100% { transform: translateX(-120px); } } / wave_circles - end/ / pulse_circles - start/ .eltd-st-loader .pulse_circles { width: 100px; height: 100px; margin: -50px 0 0 -50px; position: relative; } .eltd-st-loader .pulse_circles { box-sizing: border-box; } .eltd-st-loader .pulse_circles .ball { height: 100%; width: 100%; background: $first-main-color; position: absolute; border-radius: 50%; border: 0 solid $first-main-color; -webkit-animation: pulse_circles_pulse 3s infinite; -moz-animation: pulse_circles_pulse 3s infinite; -o-animation: pulse_circles_pulse 3s infinite; animation: pulse_circles_pulse 3s infinite; } .eltd-st-loader .pulse_circles .ball-2 { -webkit-animation-delay: -0.75s; -moz-animation-delay: -0.75s; -o-animation-delay: -0.75s; animation-delay: -0.75s; } .eltd-st-loader .pulse_circles .ball-3 { -webkit-animation-delay: -1.5s; -moz-animation-delay: -1.5s; -o-animation-delay: -1.5s; animation-delay: -1.5s; } .eltd-st-loader .pulse_circles .ball-4 { -webkit-animation-delay: -2.25s; -moz-animation-delay: -2.25s; -o-animation-delay: -2.25s; animation-delay: -2.25s; } @-webkit-keyframes pulse_circles_pulse { 0% { -webkit-transform: scale(0.1, 0.1); opacity: 1; border-width: 50px; } 100% { -webkit-transform: scale(1, 1); opacity: 0; border-width: 0; } } @-moz-keyframes pulse_circles_pulse { 0% { -moz-transform: scale(0.1, 0.1); opacity: 1; border-width: 50px; } 100% { -moz-transform: scale(1, 1); opacity: 0; border-width: 0; } } @-o-keyframes pulse_circles_pulse { 0% { -o-transform: scale(0.1, 0.1); opacity: 1; border-width: 50px; } 100% { -o-transform: scale(1, 1); opacity: 0; border-width: 0; } } @keyframes pulse_circles_pulse { 0% { transform: scale(0.1, 0.1); opacity: 1; border-width: 50px; } 100% { transform: scale(1, 1); opacity: 0; border-width: 0; } } /* pulse_circles - end*/

| ver. 1.4 | Github | . | PHP 8.2.29 | Генерация страницы: 0 | proxy | phpinfo | Настройка