40款一个div+css实现的loading加载动画效果代码
代码语言：html
所属分类：加载滚动
代码描述：40款一个div+css实现的loading加载动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Podkova:400,700'>
<style>
@charset "UTF-8";
/**
* Computes a CSS calc function that betweens a value from
* A to B over viewport-width A to viewport-width B.
* Requires a media query to cap the value at B.
*/
i {
font-style: oblique;
}
[class*=loader] {
position: relative;
top: 40%;
display: inline-block;
margin: 0 auto;
cursor: wait;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.loader-playflix-button {
display: flex;
font-size: 0.75em;
font-family: 'Podkova', serif;
height: 3em;
border-radius: 0.25em;
background-color: #083D56;
color: #19A6CF;
overflow: hidden;
counter-reset: playflix-counter 5;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
cursor: pointer;
transition: all 0.25s;
-webkit-animation: playflix-text 5s linear infinite forwards;
animation: playflix-text 5s linear infinite forwards;
}
.loader-playflix-button:hover {
background-color: #0b4e66;
}
.loader-playflix-button:active {
color: #fff;
}
.loader-playflix-button:active, .loader-playflix-button:active:after, .loader-playflix-button:active:before {
-webkit-animation: none;
animation: none;
}
.loader-playflix-button:active:before {
background-color: #080;
width: calc(100% + 1em);
counter-reset: playflix-counter 0;
}
.loader-playflix-button:before, .loader-playflix-button:after {
pointer-events: none;
}
.loader-playflix-button:before {
content: attr(data-icon);
font-size: 2em;
line-height: 1.2;
position: absolute;
width: 0%;
left: -0.5em;
top: 0;
z-index: 0;
text-align: left;
padding: 0.25em;
text-indent: 0.5em;
-webkit-animation: playflix 5s linear infinite forwards;
animation: playflix 5s linear infinite forwards;
}
.loader-playflix-button:after {
content: attr(data-label) " " counter(playflix-counter);
font-weight: 700;
display: block;
font-size: 1.5em;
line-height: 1;
padding: 0.5em;
position: relative;
white-space: nowrap;
-webkit-animation: playflix-countdown 5s linear infinite forwards;
animation: playflix-countdown 5s linear infinite forwards;
}
.loader-playflix-button[data-icon]:not([data-icon=""]):after {
padding-left: 2em;
}
@-webkit-keyframes playflix {
0% {
width: 0%;
background-color: #0E5F76;
}
89% {
width: calc(100% + .5em);
background-color: #0E5F76;
}
89.5%, 100% {
width: calc(100% + .5em);
background-color: #080;
}
}
@keyframes playflix {
0% {
width: 0%;
background-color: #0E5F76;
}
89% {
width: calc(100% + .5em);
background-color: #0E5F76;
}
89.5%, 100% {
width: calc(100% + .5em);
background-color: #080;
}
}
@-webkit-keyframes playflix-countdown {
0% {
counter-increment: playflix-counter 0;
}
20% {
counter-increment: playflix-counter -1;
}
40% {
counter-increment: playflix-counter -2;
}
60% {
counter-increment: playflix-counter -3;
}
80% {
counter-increment: playflix-counter -4;
}
100% {
counter-increment: playflix-counter -5;
}
}
@keyframes playflix-countdown {
0% {
counter-increment: playflix-counter 0;
}
20% {
counter-increment: playflix-counter -1;
}
40% {
counter-increment: playflix-counter -2;
}
60% {
counter-increment: playflix-counter -3;
}
80% {
counter-increment: playflix-counter -4;
}
100% {
counter-increment: playflix-counter -5;
}
}
@-webkit-keyframes playflix-text {
0%, 89% {
color: #19A6CF;
}
89.5%, 100% {
color: #fff;
}
}
@keyframes playflix-text {
0%, 89% {
color: #19A6CF;
}
89.5%, 100% {
color: #fff;
}
}
.loader-wobble {
font-size: 0.8em;
top: 50%;
display: inline-block;
width: 5em;
height: 1em;
line-height: 1.3;
position: relative;
color: #0E5F76;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-bottom: 0.1em solid;
margin-left: -5em;
transform: translateX(50%);
-webkit-animation: loadingText 1s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate, loadingBar 8s infinite cubic-bezier(0.445, 0.050, 0.550, 0.950) alternate;
animation: loadingText 1s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate, loadingBar 8s infinite cubic-bezier(0.445, 0.050, 0.550, 0.950) alternate;
}
#toggle:checked ~ #sect .loader-wobble {
-webkit-animation: loadingTextMove 1s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate, loadingText 1s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate, loadingBar 8s infinite cubic-bezier(0.445, 0.050, 0.550, 0.950) alternate;
animation: loadingTextMove 1s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate, loadingText 1s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate, loadingBar 8s infinite cubic-bezier(0.445, 0.050, 0.550, 0.950) alternate;
filter: drop-shadow(0.2em 0.2em 0.2em rgba(0, 0, 0, 0.5));
}
.loader-wobble:before, .loader-wobble:after {
content: "";
width: 7em;
height: 7em;
position: absolute;
top: -3em;
left: -0.5em;
right: 0;
bottom: 0;
border-radius: 50%;
}
.loader-wobble:before {
box-shadow: inset 0 0 0 0.2em rgba(8, 61, 86, 0.5);
-webkit-animation: loadingInner 1s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate;
animation: loadingInner 1s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate;
}
.loader-wobble:after {
color: #083D56;
border-radius: 50%;
border: 0.2em dashed;
border-top: 0.2em solid #0E5F76;
transform-origin: center center;
-webkit-animation: loading 1s infinite cubic-bezier(0.6, 0, 0.4, 1);
animation: loading 1s infinite cubic-bezier(0.6, 0, 0.4, 1);
}
@-webkit-keyframes loading {
to {
transform: rotate(360deg);
}
}
@keyframes loading {
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes loadingInner {
to {
transform: scale(0);
}
}
@keyframes loadingInner {
to {
transform: scale(0);
}
}
@-webkit-keyframes loadingText {
0% {
color: #0E5F76;
width: 0em;
}
100% {
color: #081E3F;
width: 4em;
}
}
@keyframes loadingText {
0% {
color: #0E5F76;
width: 0em;
}
100% {
color: #081E3F;
width: 4em;
}
}
@-webkit-keyframes loadingTextMove {
0% {
text-indent: 1em;
}
100% {
text-indent: -1em;
}
}
@keyframes loadingTextMove {
0% {
text-indent: 1em;
}
100% {
text-indent: -1em;
}
}
@-webkit-keyframes loadingBar {
0% {
width: 0em;
}
100% {
width: 6em;
}
}
@keyframes loadingBar {
0% {
width: 0em;
}
100% {
width: 6em;
}
}
.loader-bricks {
position: relative;
display: inline-block;
font-size: 1rem;
width: 8em;
height: 1em;
z-index: 1;
border-style: solid;
border-width: 0.1rem 0;
color: #19A6CF;
background-image: linear-gradient(to right, transparent 0%, transparent 49.9%, #0E5F76 50%, #0E5F76 100%);
background-size: 25%;
-webkit-animation: loaderBar 1s infinite linear;
animation: loaderBar 1s infinite linear;
}
#toggle:checked ~ #sect .loader-bricks {
filter: drop-shadow(0.3em 0.3em 0.3em rgba(0, 0, 0, 0.5));
}
.loader-bricks:before, .loader-bricks:after {
content: "";
position: absolute;
right: 0;
z-index: 0;
width: 1em;
height: 1em;
margin-top: -0.1rem;
border: 0.1rem solid #19A6CF;
border-width: 0.1rem 0;
color: #0E5F76;
background-color: currentColor;
-webkit-animation: loaderBox 2s infinite linear;
animation: loaderBox 2s infinite linear;
}
.loader-bricks:after {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
@-webkit-keyframes loaderBar {
0% {
background-position-x: 0;
}
100% {
background-position-x: 2em;
}
}
@keyframes loaderBar {
0% {
background-position-x: 0;
}
100% {
background-position-x: 2em;
}
}
@-webkit-keyframes loaderBox {
0% {
color: #0E5F76;
width: 1em;
right: 0;
top: 0;
border-color: #19A6CF;
}
27% {
color: #0E5F76;
width: 1em;
right: -1em;
top: 0;
border-color: transparent;
}
37.5% {
color: #083D56;
width: 1em;
right: -1em;
top: -1em;
border-color: transparent;
}
50% {
color: #083D56;
width: 1em;
right: 8em;
top: -1em;
border-color: transparent;
}
55% {
color: #0E5F76;
width: 1em;
right: 8em;
top: 0em;
border-color: transparent;
}
100% {
color: #0E5F76;
width: 0em;
right: 7em;
top: 0;
border-color: #19A6CF;
}
}
@keyframes loaderBox {
0% {
color: #0E5F76;
width: 1em;
right: 0;
top: 0;
border-color: #19A6CF;
}
27% {
color: #0E5F76;
width: 1em;
right: -1em;
top: 0;
border-color: transparent;
}
37.5% {
color: #083D56;
width: 1em;
right: -1em;
top: -1em;
border-color: transparent;
}
50% {
color: #083D56;
width: 1em;
right: 8em;
top: -1em;
border-color: transparent;
}
55% {
color: #0E5F76;
width: 1em;
right: 8em;
top: 0em;
border-color: transparent;
}
100% {
color: #0E5F76;
width: 0em;
right: 7em;
top: 0;
border-color: #19A6CF;
}
}
.loader-funky-bar {
display: inline-block;
width: 5em;
height: 1em;
border-radius: 2px;
position: relative;
overflow: hidden;
z-index: 0;
color: #fff;
box-shadow: 0 0 0 2px #081E3F, 0 0 0 4px #0E5F76;
}
#toggle:checked ~ #sect .loader-funky-bar {
filter: drop-shadow(0.25em 0.25em 0.25em rgba(0, 0, 0, 0.5));
}
.loader-funky-bar:before {
content: "loading...";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
-webkit-animation: loaderText 1s infinite alternate cubic-bezier(0.55, 0.15, 0.45, 0.85);
animation: loaderText 1s infinite alternate cubic-bezier(0.55, 0.15, 0.45, 0.85);
}
#toggle:checked ~ #sect .loader-funky-bar:before {
-webkit-animation: loaderText 2s infinite alternate cubic-bezier(0.55, 0.15, 0.45, 0.85), textIndent 1s infinite alternate cubic-bezier(0.55, 0.15, 0.45, 0.85);
animation: loaderText 2s infinite alternate cubic-bezier(0.55, 0.15, 0.45, 0.85), textIndent 1s infinite alternate cubic-bezier(0.55, 0.15, 0.45, 0.85);
}
.loader-funky-bar:after {
content: "";
width: 11em;
height: 11em;
position: absolute;
left: -6em;
top: -5em;
z-index: 1;
box-shadow: inset 0 0 0 0.5em #0E5F76, inset 0 0 0 1em #083D56, inset 0 0 0 1.5em #0E5F76, inset 0 0 0 2em #083D56, inset 0 0 0 2.5em #0E5F76, inset 0 0 0 3em #083D56, inset 0 0 0 3.5em #0E5F76, inset 0 0 0 4em #083D56, inset 0 0 0 4.5em #0E5F76, inset 0 0 0 5em #083D56, inset 0 0 0 5.5em #0E5F76, inset 0 0 0 6em #083D56;
border-radius: 16em 14em/16em 20em;
transform-origin: center center;
-webkit-animation: loaderRotate 5s linear infinite, loaderMover 15s linear infinite;
animation: loaderRotate 5s linear infinite, loaderMover 15s linear infinite;
}
@-webkit-keyframes loaderRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes loaderRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes loaderMover {
from {
left: -11em;
}
to {
left: -6em;
}
}
@keyframes loaderMover {
from {
left: -11em;
}
to {
left: -6em;
}
}
@-webkit-keyframes textIndent {
from {
text-indent: -2em;
}
to {
text-indent: 2em;
}
}
@keyframes textIndent {
from {
text-indent: -2em;
}
to {
text-indent: 2em;
}
}
@-webkit-keyframes loaderText {
from {
color: #19A6CF;
}
to {
color: #081E3F;
}
}
@keyframes loaderText {
from {
color: #19A6CF;
}
to {
color: #081E3F;
}
}
.loader-drippy {
display: inline-block;
position: relative;
width: 3em;
height: 3em;
top: 30%;
border-radius: 50% 0em 50% 50%;
box-shadow: 0 0 0 0.25em #081E3F, 0 0 0 0.5em #0E5F76;
transform: rotate(135deg);
}
#toggle:checked ~ #sect .loader-drippy {
box-shadow: 0 0 0 0.25em #081E3F, 0 0 0 0.5em #0E5F76, -0.2em -0.2em 0.2em 0.5em rgba(0, 0, 0, 0.25);
}
.loader-drippy:before {
content: "";
position: absolute;
display: block;
border-radius: 50% 0em 50% 50%;
overflow: hidden;
z-index: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: repeating-linear-gradient(45deg, #083D56 0, #083D56 9px, transparent 10px, transparent 19px);
background-position: center center;
background-size: 100% 100%;
-webkit-animation: loaderZoom 1s cubic-bezier(0.3, 0.1, 0.3, 0.85) infinite;
animation: loaderZoom 1s cubic-bezier(0.3, 0.1, 0.3, 0.85) infinite;
}
.loader-drippy:after {
content: "";
width: 1em;
height: 1em;
position: absolute;
bottom: 90%;
left: 90%;
z-index: -2;
border-radius: 50%;
background-color: #083D56;
box-shadow: inset -0.05em -0.25em 0.05em #0E5F76;
-webkit-animation: loaderDrip 3s cubic-bezier(0.5, 0.8, 0.5, 0.2) infinite forwards;
animation: loaderDrip 3s cubic-bezier(0.5, 0.8, 0.5, 0.2) infinite forwards;
}
#toggle:checked ~ #sect .loader-drippy:after {
box-shadow: inset -0.05em -0.25em 0.05em #0E5F76, -0.2em -0.2em 0.2em rgba(0, 0, 0, 0.25);
}
@-webkit-keyframes loaderZoom {
from {
background-size: 200% 200%;
}
to {
background-size: 141% 141%;
}
}
@keyframes loaderZoom {
from {
background-size: 200% 200%;
}
to {
background-size: 141% 141%;
}
}
@-webkit-keyframes loaderDrip {
0% {
bottom: 105%;
left: 105%;
width: 0.1em;
height: 0.1em;
border-radius: 3em 3em 3em 3em;
opacity: 1;
}
70% {
bottom: 120%;
left: 120%;
width: 1em;
height: 1em;
border-radius: 6em 6em 6em 0;
opacity: 1;
}
80% {
bottom: 130%;
left: 130%;
border-radius: 3em 6em;
opacity: 1;
}
94% {
bottom: 150%;
left: 150%;
border-radius: 2em 6em;
opacity: 1;
}
100% {
bottom: 150%;
left: 150%;
border-radius: 0.5em 6em;
opacity: 0;
}
}
@keyframes loaderDrip {
0% {
bottom: 105%;
left: 105%;
width: 0.1em;
height: 0.1em;
border-radius: 3em 3em 3em 3em;
opacity: 1;
}
70% {
bottom: 120%;
left: 120%;
width: 1em;
height: 1em;
border-radius: 6em 6em 6em 0;
opacity: 1;
}
80% {
bottom: 130%;
left: 130%;
border-radius: 3em 6em;
opacity: 1;
}
94% {
bottom: 150%;
left: 150%;
border-radius: 2em 6em;
opacity: 1;
}
100% {
bottom: 150%;
left: 150%;
border-radius: 0.5em 6em;
opacity: 0;
}
}
.loader-stopwatch {
display: inline-block;
position: relative;
top: 30%;
width: 5em;
height: 5em;
border-radius: 50%;
border: 0.38em dotted rgba(14, 95, 118, 0.5);
transform-origin: center -300%;
}
#toggle:checked ~ #sect .loader-stopwatch {
-webkit-animation: rotateClock 5s infinite ease-in-out;
animation: rotateClock 5s infinite ease-in-out;
filter: drop-shadow(0.2em 0.2em 0.2em rgba(0, 0, 0, 0.5));
}
.loader-stopwatch:before {
content: "";
position: absolute;
left: 50%;
top: 2.14em;
z-index: 1;
display: block;
height: 2em;
width: 0;
transform-origin: center top;
box-shadow: 0 0 0 0.11em #0E5F76;
-webkit-animation: rotatePointer 3s infinite steps(30) linear;
animation: rotatePointer 3s infinite steps(30) linear;
}
.loader-stopwatch:after {
content: "•";
position: absolute;
left: 0.7em;
top: 0.7em;
width: 3em;
height: 3em;
line-height: 0;
color: transparent;
text-indent: 3em;
text-shadow: -3px -5px 3px #19A6CF;
border-radius: 50% 0 50% 50%;
border: 3px solid #0E5F76;
background-color: #083D56;
transform-origin: center center;
-webkit-animation: rotatePointer 10s infinite linear;
animation: rotatePointer 10s infinite linear;
}
@-webkit-keyframes rotatePointer {
to {
transform: rotate(359deg);
}
}
@keyframes rotatePointer {
to {
transform: rotate(359deg);
}
}
@-webkit-keyframes rotateClock {
0%, 100% {
transform: rotate(-10deg);
}
50% {
transform: rotate(10deg);
}
}
@keyframes rotateClock {
0%, 100% {
transform: rotate(-10deg);
}
50% {
transform: rotate(10deg);
}
}
.loader-peace-sign {
display: inline-block;
position: relative;
border-radius: 50%;
border: 0.5em solid currentColor;
top: 30%;
width: 5em;
height: 5em;
color: #083D56;
text-align: center;
background-color: rgba(14, 95, 118, 0.75);
-webkit-animation: peace 2s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate, boxFill 15s infinite ease-out;
animation: peace 2s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate, boxFill 15s infinite ease-out;
}
.loader-peace-sign:before, .loader-peace-sign:after {
content: "";
position: absolute;
display: block;
}
.loader-peace-sign:before {
top: 0;
left: 1.8em;
height: 4.2em;
width: 0;
border-left: solid 0.5em currentColor;
}
.loader-peace-sign:after {
height: 2.5em;
width: 2.5em;
bottom: -0.5em;
left: 0.78em;
transform-origin: center center;
border: solid currentColor;
border-width: 0.5em 0.5em 0 0;
transform: rotate(-45deg);
}
@-webkit-keyframes peace {
to {
color: #083D56;
transform: scale(1.2) rotate(-10deg);
}
}
@keyframes peace {
to {
color: #083D56;
transform: scale(1.2) rotate(-10deg);
}
}
@-webkit-keyframes boxFill {
0% {
box-shadow: inset 0 5em 0 #081E3F, 0 0 0 #083D56;
}
90%, 93%, 100% {
box-shadow: inset 0 0 0 #081E3F, 0 0 0 #083D56;
}
92% {
box-shadow: inset 0 0 0 #081E3F, 0 0 2em 0.5em #083D56;
}
}
@keyframes boxFill {
0% {
box-shadow: inset 0 5em 0 #081E3F, 0 0 0 #083D56;
}
90%, 93%, 100% {
box-shadow: inset 0 0 0 #081E3F, 0 0 0 #083D56;
}
92% {
box-shadow: inset 0 0 0 #081E3F, 0 0 2em 0.5em #083D56;
}
}
.loader-bubble-disks {
position: relative;
display: inline-block;
margin: 0 auto;
width: 3em;
height: 3em;
transform: translateX(-50%);
}
.loader-bubble-disks:before, .loader-bubble-disks:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
color: rgba(14, 95, 118, 0.25);
background-color: currentColor;
-webkit-animation: scaleCircles 2s infinite cubic-bezier(0.55, 0.15, 0.45, 0.85) alternate;
animation: scaleCircles 2s infinite cubic-bezier(0.55, 0.15, 0.45, 0.85) alternate;
}
#toggle:checked ~ #sect .loader-bubble-disks:before, #toggle:checked ~ #sect .loader-bubble-disks:after {
box-shadow: 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.25);
}
.loader-bubble-disks:after {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
@-webkit-keyframes scaleCircles {
0% {
z-index: 1;
transform: scale3d(0, 0, 0);
}
100% {
z-index: 2;
transform: scale3d(1, 1, 1);
}
}
@keyframes scaleCircles {
0% {
z-index: 1;
transform: scale3d(0, 0, 0);
}
100% {
z-index: 2;
transform: scale3d(1, 1, 1);
}
}
.loader-cycle-disks {
position: relative;
display: inline-block;
margin: 0 auto;
width: 4em;
height: 2em;
}
#toggle:checked ~ #sect .loader-cycle-disks {
filter: url("#filter-goo2");
}
.loader-cycle-disks:before, .loader-cycle-disks:after {
content: "";
left: 0;
position: absolute;
width: 2em;
height: 2em;
border-radius: 50%;
background-color: #0E5F76;
-webkit-animation: movingCircles 2s infinite ease-in-out;
animation: movingCircles 2s infinite ease-in-out;
}
.loader-cycle-disks:after {
-webkit-animation-delay: -1s;
animation-delay: -1s;
background-color: #083D56;
}
@-webkit-keyframes movingCircles {
0% {
z-index: 1;
transform: translate(0, 0);
}
50% {
z-index: 1;
transform: translate(120%, 0);
}
50.1% {
z-index: 0;
transform: translate(120%, 0);
}
100% {
z-index: 0;
transform: translate(0, 0);
}
}
@keyframes movingCircles {
0% {
z-index: 1;
transform: translate(0, 0);
}
50% {
z-index: 1;
transform: translate(120%, 0);
}
50.1% {
z-index: 0;
transform: translate(120%, 0);
}
100% {
z-index: 0;
transform: translate(0, 0);
}
}
.loader-progress-bar {
width: 6em;
height: 1.5em;
border-radius: 0.5em;
border: 0.125em solid;
color: #0E5F76;
}
#toggle:checked ~ #sect .loader-progress-bar {
filter: drop-shadow(0.2em 0.2em 0.2em rgba(0, 0, 0, 0.5));
}
.loader-progress-bar:before, .loader-progress-bar:after {
content: "";
top: 0.2em;
left: 0.2em;
right: 0.2em;
bottom: 0.2em;
border-radius: 0.25em;
display: block;
position: absolute;
overflow: hidden;
}
.loader-progress-bar:after {
right: 100%;
-webkit-animation: loaderBarInfinite 10s infinite linear, loaderBarScroll 10s infinite linear;
animation: loaderBarInfinite 10s infinite linear, loaderBarScroll 10s infinite linear;
box-shadow: inset 0 0.5em 0.5em rgba(25, 166, 207, 0.25), inset 0 -0.5em 0.5em rgba(8, 30, 63, 0.5);
background-image: repeating-linear-gradient(45deg, #083D56 0px, #083D56 4px, #0E5F76 5px, #0E5F76 9px);
background-size: 26px 13px;
}
@-webkit-keyframes loaderBarInfinite {
from {
background-position: 104px 0;
}
to {
background-position: -104px 0;
}
}
@keyframes loaderBarInfinite {
from {
background-position: 104px 0;
}
to {
background-position: -104px 0;
}
}
@-webkit-keyframes loaderBarScroll {
to {
right: 2%;
}
}
@keyframes loaderBarScroll {
to {
right: 2%;
}
}
.loader-3-bars {
color: #0E5F76;
width: 0.75em;
height: 2em;
top: 60%;
left: 1em;
border-radius: 2px;
background-color: #083D56;
transform: rotate(180deg);
transform-origin: center top;
-webkit-animation: da3bars 1s infinite cubic-bezier(0.3, 0.1, 0.3, 0.85);
animation: da3bars 1s infinite cubic-bezier(0.3, 0.1, 0.3, 0.85);
}
#toggle:checked ~ #sect .loader-3-bars {
filter: drop-shadow(-0.15em -0.15em 0.15em rgba(0, 0, 0, 0.25));
}
.loader-3-bars:before, .loader-3-bars:after {
content: "";
position: absolute;
width: 0.75em;
height: 2em;
display: inline-block;
color: #0E5F76;
background-color: #083D56;
border-radius: 2px;
left: 1em;
top: 0;
-webkit-animation: da3bars 1s infinite cubic-bezier(0.3, 0.1, 0.3, 0.85);
animation: da3bars 1s infinite cubic-bezier(0.3, 0.1, 0.3, 0.85);
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.loader-3-bars:after {
left: 2em;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
@-webkit-keyframes da3bars {
0%, 100% {
height: 2em;
background-color: #083D56;
}
75% {
height: 1em;
background-color: #083D56;
}
}
@keyframes da3bars {
0%, 100% {
height: 2em;
background-color: #083D56;
}
75% {
height: 1em;
background-color: #083D56;
}
}
.loader-radar {
width: 4em;
height: 4em;
top: 33%;
border-radius: 50%;
overflow: hidden;
border: 1px solid #0E5F76;
z-index: 1;
background-color: rgba(8, 61, 86, 0.2);
background-image: repeating-radial-gradient(transparent 0, transparent 0.39em, rgba(8, 61, 86, 0.5) 0.45em, rgba(8, 61, 86, 0.5) 0.5em);
}
#toggle:checked ~ #sect .loader-radar {
background-image: repeating-radial-gradient(transparent 0, transparent 0.39em, rgba(8, 61, 86, 0.5) 0.45em, rgba(8, 61, 86, 0.5) 0.5em), repeating-radial-gradient(transparent 0, transparent 0.39em, rgba(0, 0, 0, 0.25) 0.45em, rgba(0, 0, 0, 0.25) 0.5em);
background-position: 0px 0px, 1px 1px;
box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25), inset 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
}
.loader-radar:before, .loader-radar:after {
content: "";
position: absolute;
display: block;
}
.loader-radar:before {
z-index: 0;
width: 2.5em;
height: 2em;
top: 50%;
left: 50%;
transform-origin: left top;
border-left: 0.1em solid #19A6CF;
background-image: linear-gradient(to right, rgba(8, 61, 86, 0.75) 0%, transparent 85%);
-webkit-animation: radar 2s infinite linear;
animation: radar 2s infinite linear;
}
.loader-radar:after {
left: 62%;
top: 34%;
width: 2px;
height: 2px;
border-radius: 50%;
background-color: currentColor;
-webkit-animation: radarDotGlow 2s infinite linear, radarDotMove 15s infinite cubic-bezier(0.5, -0.35, 0.5, 1.35);
animation: radarDotGlow 2s infinite linear, radarDotMove 15s infinite cubic-bezier(0.5, -0.35, 0.5, 1.35);
}
@-webkit-keyframes radar {
to {
transform: rotate(359deg);
}
}
@keyframes radar {
to {
transform: rotate(359deg);
}
}
@-webkit-keyframes radarDotGlow {
0%, 59.9%, 87%, 100% {
color: rgba(25, 166, 207, 0.33);
box-shadow: 0 0 0.1em 0.05em currentColor;
}
62% {
color: #19a6cf;
box-shadow: 0 0 0.1em 0.1em currentColor;
}
}
@keyframes radarDotGlow {
0%, 59.9%, 87%, 100% {
color: rgba(25, 166, 207, 0.33);
box-shadow: 0 0 0.1em 0.05em currentColor;
}
62% {
color: #19a6cf;
box-shadow: 0 0 0.1em 0.1em currentColor;
}
}
@-webkit-keyframes radarDotMove {
0% {
top: 0%;
left: 85%;
}
40% {
top: 30%;
left: 70%;
}
100% {
top: 50%;
left: 50%;
}
}
@keyframes radarDotMove {
0% {
top: 0%;
left: 85%;
}
40% {
top: 30%;
left: 70%;
}
100% {
top: 50%;
left: 50%;
}
}
.loader-beaker {
top: 30%;
width: 2em;
height: 4em;
border-radius: 5%;
border: 0.15em solid #081E3F;
overflow: hidden;
z-index: 1;
box-shadow: 0 0.2em 0 0.2em #0E5F76;
}
#toggle:checked ~ #sect .loader-beaker {
filter: drop-shadow(-0.2em 0.2em 0.2em rgba(14, 95, 118, 0.3)) url("#filter-goo2");
-webkit-animation: pour 15s infinite cubic-bezier(.22,.01,.41,.54);
animation: pour 15s infinite cubic-bezier(.22,.01,.41,.54);
}
.loader-beaker:before {
content: "";
position: absolute;
z-index: -1;
left: -1.5em;
top: 100%;
width: 6em;
height: 6em;
background-color: rgba(8, 61, 86, 0.75);
border-radius: 66% 100% 100% 66%/50% 150% 100% 150%;
-webkit-animation: waveRot 15s infinite cubic-bezier(.22,.01,.41,.54);
animation: waveRot 15s infinite cubic-bezier(.22,.01,.41,.54);
}
.loader-beaker:after {
content: " 100\a 75\a 50\a 25";
white-space: pre;
text-align: left;
font-size: 0.5em;
font-weight: bold;
line-height: 2.3;
color: #0E5F76;
position: absolute;
left: 0;
top: -0.8em;
bottom: 0;
right: 50%;
mix-blend-mode: exclusion;
background-image: repeating-linear-gradient(to bottom, #083D56 0, #083D56 1px, transparent 2px, transparent 9px);
background-position-y: 0.9em;
}
@-webkit-keyframes waveRot {
to {
transform: translateY(-70%) rotate(-1440deg);
}
}
@keyframes waveRot {
to {
transform: translateY(-70%) rotate(-1440deg);
}
}
@-webkit-keyframes waveRot2 {
to {
transform: translateY(-65%) rotate(-1080deg);
}
}
@keyframes waveRot2 {
to {
transform: translateY(-65%) rotate(-1080deg);
}
}
@-webkit-keyframes pour {
0%, 90%, 100% {
transform: rotate(0deg);
}
15% {
transform: rotate(45deg);
}
}
@keyframes pour {
0%, 90%, 100% {
transform: rotate(0deg);
}
15% {
transform: rotate(45deg);
}
}
.loader-floppy-disk {
border: 0.2em solid #0E5F76;
top: 30%;
width: 3em;
height: 3em;
border-radius: 0 10px 0 0;
background-image: repeating-linear-gradient(to bottom, #0E5F76 0, #0E5F76 1px, transparent 2px, transparent 3px, #0E5F76 5px, transparent 6px);
background-size: 7px 12px;
background-repeat: no-repeat;
background-position: 42% 0%;
}
#toggle:checked ~ #sect .loader-floppy-disk {
box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.3);
}
.loader-floppy-disk:before {
content: "HD";
line-height: 1.4;
font-weight: 700;
color: #081E3F;
position: absolute;
left: 8%;
bottom: -0.15em;
width: 80%;
height: 1.6em;
border-radius: 0.1em 0.1em 0 0;
background-color: #083D56;
border: 0.2em solid #0E5F76;
transform: rotate(180deg);
-webkit-animation: floppyLabel 10s infinite linear;
animation: floppyLabel 10s infinite linear;
}
.loader-floppy-disk:after {
content: "";
position: absolute;
left: 0.65em;
top: -0.1em;
width: 1.5em;
height: 1.2em;
border-radius: 0.1em 0.1em 0 0;
border: 0.3em solid #0E5F76;
box-shadow: inset 0.43em 0 0 0 #0E5F76;
-webkit-animation: floppy 1s infinite linear alternate;
animation: floppy 1s infinite linear alternate;
}
@-webkit-keyframes floppy {
to {
transform: translateX(-30%);
}
}
@keyframes floppy {
to {
transform: translateX(-30%);
}
}
@-webkit-keyframes floppyLabel {
from {
box-shadow: inset 0 0em 0 rgba(14, 95, 118, 0.75);
}
to {
box-shadow: inset 0 1.3em 0 rgba(14, 95, 118, 0.75);
}
}
@keyframes floppyLabel {
from {
box-shadow: inset 0 0em 0 rgba(14, 95, 118, 0.75);
}
to {
box-shadow: inset 0 1.3em 0 rgba(14, 95, 118, 0.75);
}
}
.loader-zoom {
width: 2em;
height: 2em;
}
#toggle:checked ~ #sect .loader-zoom {
filter: drop-shadow(0.2em 0.2em 0.2em rgba(0, 0, 0, 0.3));
}
.loader-zoom:before, .loader-zoom:after {
content: "";
position: absolute;
width: 2em;
height: 2em;
left: 0;
top: 0;
bottom: 0;
right: 0;
border: 2px solid #0E5F76;
background-color: rgba(8, 61, 86, 0.5);
-webkit-animation: boxZoom 2s infinite cubic-bezier(0.65, 1.5, 0.6, 0.95) alternate;
animation: boxZoom 2s infinite cubic-bezier(0.65, 1.5, 0.6, 0.95) alternate;
}
.loader-zoom:after {
border-radius: 100%;
animation-direction: alternate-reverse;
}
@-webkit-keyframes boxZoom {
from {
z-index: 1;
background-color: #081e3f;
transform: scale(0.5) rotateX(180deg);
}
to {
z-index: 0;
border-radius: 10%;
transform: scale(1.5) rotateX(0deg) rotateY(180deg);
}
}
@keyframes boxZoom {
from {
z-index: 1;
background-color: #081e3f;
transform: scale(0.5) rotateX(180deg);
}
to {
z-index: 0;
border-radius: 10%;
transform: scale(1.5) rotateX(0deg) rotateY(180deg);
}
}
.loader-spinna {
width: 4em;
height: 4em;
top: 25%;
border-radius: 50%;
overflow: hidden;
z-index: 2;
background-color: #081e3f;
}
.loader-spinna:before, .loader-spinna:after {
content: "";
position: absolute;
display: inline-block;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
z-index: 1;
}
.loader-spinna:before {
border: 3px solid rgba(8, 30, 63, 0);
box-shadow: inset 0 0 0 3em #081e3f;
}
#toggle:checked ~ #sect .loader-spinna:before {
border: 3px dotted #081e3f;
}
.loader-spinna:after {
z-index: 0;
border-width: 10px;
border-style: solid;
-o-border-image: linear-gradient(to bottom, #19A6CF 0%, transparent 100%);
border-image: linear-gradient(to bottom, #19A6CF 0%, transparent 100%);
border-image-slice: 0 0 0 20;
-webkit-animation: spinnaRot 1s infinite linear;
animation: spinnaRot 1s infinite linear;
}
@-webkit-keyframes spinnaRot {
to {
transform: rotate(359deg);
}
}
@keyframes spinnaRot {
to {
transform: rotate(359deg);
}
}
.loader-pacman {
width: 7em;
height: 0.75em;
background: repeating-radial-gradient(#083D56, #083D56 0.2em, transparent 0.2em, transparent 100%);
background-size: 0.8em 0.8em;
-webkit-animation: pac-dots 5s linear infinite;
animation: pac-dots 5s linear infinite;
}
#toggle:checked ~ #sect .loader-pacman {
filter: drop-shadow(0.2em 0.2em 0.2em rgba(0, 0, 0, 0.3));
}
.loader-pacman:before, .loader-pacman:after {
content: "";
display: block;
position: absolute;
left: 0;
top: -0.615em;
width: 1em;
height: 1em;
border-radius: 50%;
border: 1em solid #0E5F76;
}
.loader-pacman:before {
border-color: transparent #0E5F76 #0E5F76 transparent;
-webkit-animation: pac-top 0.5s linear infinite alternate;
animation: pac-top 0.5s linear infinite alternate;
}
.loader-pacman:after {
border-color: #0E5F76 transparent transparent #0E5F76;
top: auto;
bottom: -0.615em;
-webkit-animation: pac-bot 0.5s linear infinite alternate;
animation: pac-bot 0.5s linear infinite alternate;
}
@-webkit-keyframes pac-dots {
to {
background-position: -200% 0;
}
}
@keyframes pac-dots {
to {
background-position: -200% 0;
}
}
@-webkit-keyframes pac-move {
to {
width: 1em;
}
}
@keyframes pac-move {
to {
width: 1em;
}
}
@-webkit-keyframes pac-top {
from {
transform: rotate(45deg);
}
to {
transform: rotate(105deg);
}
}
@keyframes pac-top {
from {
transform: rotate(45deg);
}
to {
transform: rotate(105deg);
}
}
@-webkit-keyframes pac-bot {
from {
transform: rotate(45deg);
}
to {
transform: rotate(-15deg);
}
}
@keyframes pac-bot {
from {
transform: rotate(45deg);
}
to {
transform: rotate(-15deg);
}
}
.loader-pulsing {
border-radius: 50%;
background-color: currentColor;
width: 1.5em;
height: 1.5em;
color: #083D56;
}
#toggle:checked ~ #sect .loader-pulsing {
-webkit-animation: pulseColor 3s ease infinite;
animation: pulseColor 3s ease infinite;
}
.loader-pulsing:before, .loader-pulsing:after {
content: "";
position: absolute;
top: 0;
color: #083D56;
background-color: currentColor;
width: 100%;
height: 100%;
display: block;
border-radius: 50%;
transition: all 1s;
-webkit-animation: pulse 3s ease-out infinite;
animation: pulse 3s ease-out infinite;
}
.loader-pulsing:after {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
-webkit-animation-timing-function: cubic-bezier(0.3, 1.65, 0.7, -0.65);
animation-timing-function: cubic-bezier(0.3, 1.65, 0.7, -0.65);
}
@-webkit-keyframes pulse {
0% {
transform: scale(0);
color: #083D56;
}
75%, 100% {
transform: scale(4);
color: transparent;
}
}
@keyframes pulse {
0% {
transform: scale(0);
color: #083D56;
}
75%, 100% {
transform: scale(4);
color: transparent;
}
}
@-webkit-keyframes pulseColor {
50%, 90% {
color: #083D56;
}
70% {
color: #0E5F76;
}
}
@keyframes pulseColor {
50%, 90% {
color: #083D56;
}
70% {
color: #0E5F76;
}
}
.loader-battery {
top: 25%;
width: 2em;
height: 5em;
border: 0.2em solid;
border-radius: 0.25em;
z-index: 1;
color: #083D56;
-webkit-animation: batteryColor 10s linear infinite;
animation: batteryColor 10s linear infinite;
}
#toggle:checked ~ #sect .loader-battery {
filter: drop-shadow(0.3em 0.3em 0.3em rgba(0, 0, 0, 0.3));
}
.loader-battery:before, .loader-battery:after {
content: "";
position: absolute;
display: inline-block;
}
.loader-battery:before {
mix-blend-mode: color-burn;
content: "+\a\a\a-";
white-space: pre;
padding-top: 0.3em;
line-height: 1.15;
font-weight: bold;
border: 0.1em solid;
border-width: 0.2em 0 0 0;
width: 1em;
left: 50%;
top: -0.45em;
z-index: 4;
border-radius: 0.1em 0.1em 0 0;
transform: translateX(-50%);
}
.loader-battery:after {
top: 0.2em;
left: 0.2em;
right: 0.2em;
bottom: 0.2em;
z-index: 1;
box-shadow: inset 0 0 0;
-webkit-animation: batteryFill 10s linear infinite;
animation: batteryFill 10s linear infinite;
}
@-webkit-keyframes batteryFill {
to {
box-shadow: inset 0 -4.5em 0;
}
}
@keyframes batteryFill {
to {
box-shadow: inset 0 -4.5em 0;
}
}
@-webkit-keyframes batteryColor {
96.5% {
color: #0E5F76;
}
97%, 99% {
color: #19A6CF;
}
}
@keyframes batteryColor {
96.5% {
color: #0E5F76;
}
97%, 99% {
color: #19A6CF;
}
}
.loader-vinyl {
width: 4em;
height: 4em;
top: 28%;
z-index: 1;
border-radius: 50%;
overflow: hidden;
border: 0.2em solid #083D56;
background-image: repeating-radial-gradient(transparent 0px, transparent 1px, rgba(8, 61, 86, 0.3) 2px, rgba(8, 61, 86, 0.3) 3px);
background-position: 0 0;
}
.loader-vinyl:before {
position: absolute;
content: "";
top: 0.8em;
left: -0.65em;
width: 0;
height: 0;
display: block;
border-width: 1em 2.5em;
border-style: solid;
border-color: transparent rgba(14, 95, 118, 0.6);
-webkit-animation: lightHouseTurn 3s linear infinite;
animation: lightHouseTurn 3s linear infinite;
}
.loader-vinyl:after {
content: "";
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: -0.2em;
border-radius: 50%;
background-image: radial-gradient(#081E3F 0%, #083D56 7%, #083D56 25%, transparent 25.1%);
}
@-webkit-keyframes lightHouseTurn {
to {
transform: rotate(359deg);
}
}
@keyframes lightHouseTurn {
to {
transform: rotate(359deg);
}
}
@-webkit-keyframes grooves {
from {
background-image: repeating-radial-gradient(transparent 0px, transparent 2px, #083D56 3px, #083D56 5px);
}
to {
background-image: repeating-radial-gradient(#083D56 0px, #083D56 1px, transparent 2px, transparent 4px, #083D56 5px, #083D56 6px);
}
}
@keyframes grooves {
from {
background-image: repeating-radial-gradient(transparent 0px, transparent 2px, #083D56 3px, #083D56 5px);
}
to {
background-image: repeating-radial-gradient(#083D56 0px, #083D56 1px, transparent 2px, transparent 4px, #083D56 5px, #083D56 6px);
}
}
td[data-3d] {
perspective: 600px;
}
#toggle:checked ~ #sect td[data-3d] {
filter: drop-shadow(0.2em 0.2em 0.2em rgba(0, 0, 0, 0.2));
}
.loader-triangle {
width: 4em;
height: 1.5em;
line-height: 1.5;
color: #19A6CF;
background-color: #083D56;
transform-style: preserve-3d;
transform-origin: center center -1.15em;
animation: triRot 3s linear infinite reverse, reflex 3s linear infinite reverse;
}
.loader-triangle:before, .loader-triangle:after, .loader-triangle {
background-size: 12em 2em;
}
#toggle:checked ~ #sect .loader-triangle:before, #toggle:checked ~ #sect .loader-triangle:after, #toggle:checked ~ #sect .loader-triangle {
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
background-image: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.15) 0em, rgba(0, 0, 0, 0.15) 3em, transparent 4.5em, transparent 7.5em, rgba(255, 255, 255, 0.05) 9em, rgba(255, 255, 255, 0.05) 13em);
}
.loader-triangle:before, .loader-triangle:after {
background-color: #083D56;
position: absolute;
width: 4em;
height: 1.5em;
top: 0;
animation: reflex 3s linear infinite reverse;
}
.loader-triangle:before {
content: "wait…";
left: -100%;
transform-origin: right center;
transform: rotateY(-121deg);
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.loader-triangle:after {
content: "please";
right: -100%;
transform-origin: left center;
transform: rotateY(120deg);
-webkit-animation-delay: -2s;
animation-delay: -2s;
}
@-webkit-keyframes triRot {
0% {
transform: rotateY(0deg);
}
33.3% {
transform: rotateY(120deg);
}
66.6% {
transform: rotateY(240deg);
}
100% {
transform: rotateY(360deg);
}
}
@keyframes triRot {
0% {
transform: rotateY(0deg);
}
33.3% {
transform: rotateY(120deg);
}
66.6% {
transform: rotateY(240deg);
}
100% {
transform: rotateY(360deg);
}
}
@-webkit-keyframes reflex {
0% {
background-position-x: -4em;
}
100% {
background-position-x: -16em;
}
}
@keyframes reflex {
0% {
background-position-x: -4em;
}
100% {
background-position-x: -16em;
}
}
td[data-3d] {
perspective: 600px;
}
.loader-road {
font-size: 0.66em;
z-index: 1;
top: 45%;
width: 4em;
height: 28em;
border-style: solid;
border-width: 0 0.2em;
color: #0E5F76;
background-color: rgba(8, 61, 86, 0.2);
transform-style: preserve-3d;
transform: rotateX(87deg);
transform-origin: center top;
}
.loader-road:before, .loader-road:after {
content: "";
position: absolute;
}
.loader-road:before {
content: "--------";
white-space: pre;
line-height: 0.5;
width: 0.2em;
left: 1.8em;
z-index: 0;
top: 0;
bottom: 0;
text-indent: -1.75em;
font-weight: bold;
background-image: repeating-linear-gradient(to bottom, #0E5F76 0em, #0E5F76 2em, transparent 2.01em, transparent 4em);
background-size: 2em 4em;
background-position: 0 0;
-webkit-animation: middleTrack 1s linear infinite, middleTrackText 8s linear infinite;
animation: middleTrack 1s linear infinite, middleTrackText 8s linear infinite;
}
.loader-road:after {
font-size: 0.5em;
content: "loading";
line-height: 1.2;
border: 0.2em solid #0E5F76;
color: #19A6CF;
border-width: 0.2em 0.2em 0;
height: 3.75em;
z-index: 2;
top: 0;
left: -0.2em;
right: -0.2em;
border-radius: 1em 1em 0 0;
box-shadow: inset 0 1em 0 rgba(8, 30, 63, 0.5), inset 0 1.2em 0 #0E5F76;
transform-origin: center bottom;
transform: rotateX(-87deg) translateZ(-1px);
-webkit-animation: highwaySign 5s linear infinite;
animation: highwaySign 5s linear infinite;
}
@-webkit-keyframes middleTrackText {
0%, 50.1%, 100% {
padding-top: 0;
}
50% {
padding-top: 27em;
}
}
@keyframes middleTrackText {
0%, 50.1%, 100% {
padding-top: 0;
}
50% {
padding-top: 27em;
}
}
@-webkit-keyframes middleTrack {
to {
background-position: 0 8em;
}
}
@keyframes middleTrack {
to {
background-position: 0 8em;
}
}
@-webkit-keyframes highwaySign {
0% {
transform: rotateX(-87deg) translateZ(0) translateY(0em);
opacity: 0;
filter: blur(0.25em);
}
10% {
opacity: 1;
filter: blur(0.1em);
}
80% {
transform: rotateX(-87deg) translateZ(53em) translateY(2.7em);
opacity: 1;
filter: blur(0em);
}
81% {
opacity: 0;
transform: rotateX(-87deg) translateZ(53.1em) translateY(2.7em);
}
100% {
opacity: 0;
transform: rotateX(-87deg) translateZ(0em) translateY(0em);
}
}
@keyframes highwaySign {
0% {
transform: rotateX(-87deg) translateZ(0) translateY(0em);
opacity: 0;
filter: blur(0.25em);
}
10% {
opacity: 1;
filter: blur(0.1em);
}
80% {
transform: rotateX(-87deg) translateZ(53em) translateY(2.7em);
opacity: 1;
filter: blur(0em);
}
81% {
opacity: 0;
transform: rotateX(-87deg) translateZ(53.1em) translateY(2.7em);
}
100% {
opacity: 0;
transform: rotateX(-87deg) translateZ(0em) translateY(0em);
}
}
.loader-wheel {
width: 5em;
height: 5em;
border-radius: 50%;
border: 0.2em solid;
color: #083D56;
background-color: rgba(8, 61, 86, 0.2);
-webkit-animation: spinTheWheel 4s cubic-bezier(0.3, 0.1, 0.3, 0.85) infinite;
animation: spinTheWheel 4s cubic-bezier(0.3, 0.1, 0.3, 0.85) infinite;
}
#toggle:checked ~ #sect .loader-wheel {
-webkit-animation: rollTheWheel 4s cubic-bezier(0.3, 0.1, 0.3, 0.85) infinite alternate;
animation: rollTheWheel 4s cubic-bezier(0.3, 0.1, 0.3, 0.85) infinite alternate;
box-shadow: 0 0 0.5em 0.2em rgba(0, 0, 0, 0.25);
}
@-webkit-keyframes spinTheWheel {
from {
transform: rotate(0deg);
}
to {
transform: rotate(1436deg);
}
}
@keyframes spinTheWheel {
from {
transform: rotate(0deg);
}
to {
transform: rotate(1436deg);
}
}
@-webkit-keyframes rollTheWheel {
from {
transform: translateX(-100%) rotate(0deg);
}
to {
transform: translateX(100%) rotate(359deg);
}
}
@keyframes rollTheWheel {
from {
transform: translateX(-100%) rotate(0deg);
}
to {
transform: translateX(100%) rotate(359deg);
}
}
.loader-wheel:before, .loader-wheel:after {
content: "";
position: absolute;
border-radius: 50%;
border-width: 0.2em;
}
.loader-wheel:before {
width: 4em;
height: 4em;
left: 0.3em;
top: 0.3em;
border-style: dotted;
}
.loader-wheel:after {
width: 3em;
height: 3em;
border-style: solid;
left: 0.8em;
top: 0.8em;
background-color: #081E3F;
background-image: radial-gradient(#081E3F 0, #083D56 1px, #0E5F76 2px, #083D56 4px, transparent 5px);
background-repeat: no-repeat;
}
.loader-disc-bouncer {
width: 5em;
height: 5em;
border-radius: 50%;
background-color: #083D56;
z-index: 0;
}
.loader-disc-bouncer:before, .loader-disc-bouncer:after {
content: "";
position: absolute;
border-radius: 50%;
}
#toggle:checked ~ #sect .loader-disc-bouncer, #toggle:checked ~ #sect .loader-disc-bouncer:before, #toggle:checked ~ #sect .loader-disc-bouncer:after {
box-shadow: 0 0 0.75em rgba(0, 0, 0, 0.5);
}
.loader-disc-bouncer:before {
width: 3em;
height: 3em;
left: 1em;
top: 1em;
z-index: 1;
background-color: #0E5F76;
-webkit-animation: bounce-disks 1s infinite alternate cubic-bezier(0.3, 0.1, 0.3, 0.85);
animation: bounce-disks 1s infinite alternate cubic-bezier(0.3, 0.1, 0.3, 0.85);
}
.loader-disc-bouncer:after {
width: 1em;
height: 1em;
left: 2em;
top: 2em;
background-color: #19A6CF;
z-index: 2;
-webkit-animation: bounce-disks2 1s 0.5s infinite alternate cubic-bezier(0.3, 0.1, 0.3, 0.85);
animation: bounce-disks2 1s 0.5s infinite alternate cubic-bezier(0.3, 0.1, 0.3, 0.85);
}
@-webkit-keyframes bounce-disks {
to {
transform: scale(1.5);
}
}
@keyframes bounce-disks {
to {
transform: scale(1.5);
}
}
@-webkit-keyframes bounce-disks2 {
to {
transform: scale(2);
}
}
@keyframes bounce-disks2 {
to {
transform: scale(2);
}
}
.loader-butterfly {
font-size: 2em;
width: 2em;
height: 2em;
transform: rotateZ(-13deg);
-webkit-animation: insect-fly 0.3333333333s infinite alternate cubic-bezier(.45,-0.43,.63,1.94);
animation: insect-fly 0.3333333333s infinite alternate cubic-bezier(.45,-0.43,.63,1.94);
}
.loader-butterfly:before, .loader-butterfly:after {
content: "";
position: absolute;
width: 1em;
height: 1.5em;
border: 1px solid #0E5F76;
background-color: rgba(8, 61, 86, 0.5);
-webkit-animation: wings 0.3333333333s infinite cubic-bezier(0.6, 0, 0.4, 1) alternate;
animation: wings 0.3333333333s infinite cubic-bezier(0.6, 0, 0.4, 1) alternate;
}
.loader-butterfly:before {
left: 0;
border-radius: 40% 20% 50% 50%;
transform-origin: right center;
}
.loader-butterfly:after {
right: 0;
border-radius: 20% 40% 50% 50%;
transform-origin: left center;
animation-direction: alternate-reverse;
}
@-webkit-keyframes wings {
from {
transform: rotateX(60deg) rotateY(-60deg);
}
to {
transform: rotateX(60deg) rotateY(60deg);
}
}
@keyframes wings {
from {
transform: rotateX(60deg) rotateY(-60deg);
}
to {
transform: rotateX(60deg) rotateY(60deg);
}
}
@-webkit-keyframes insect-fly {
from {
margin-top: -0.3em;
}
to {
margin-top: 0.3em;
}
}
@keyframes insect-fly {
from {
margin-top: -0.3em;
}
to {
margin-top: 0.3em;
}
}
.loader-blow-up {
width: 3em;
height: 3em;
position: relative;
z-index: 2;
}
#toggle:checked ~ #sect .loader-blow-up {
filter: drop-shadow(0.1em 0.1em 0.1em rgba(0, 0, 0, 0.2));
}
.loader-blow-up:before {
content: "";
display: block;
position: absolute;
left: 0.75em;
top: 0.75em;
border-radius: 50%;
background-color: #083D56;
width: 1.5em;
height: 1.5em;
z-index: 1;
-webkit-animation: blow-grow 4s infinite cubic-bezier(.45,-0.43,.63,1.94);
animation: blow-grow 4s infinite cubic-bezier(.45,-0.43,.63,1.94);
}
.loader-blow-up:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1rem;
height: 1rem;
z-index: 0;
border-radius: 50%;
transform: translate(-50%, -50%);
-webkit-animation: blow-fade-in 1s infinite cubic-bezier(.45,-0.43,.63,1.94), blow-shadow 1s infinite cubic-bezier(.45,-0.43,.63,1.94);
animation: blow-fade-in 1s infinite cubic-bezier(.45,-0.43,.63,1.94), blow-shadow 1s infinite cubic-bezier(.45,-0.43,.63,1.94);
}
@-webkit-keyframes blow-fade-in {
0% {
opacity: 0;
}
2%, 100% {
opacity: 1;
}
}
@keyframes blow-fade-in {
0% {
opacity: 0;
}
2%, 100% {
opacity: 1;
}
}
@-webkit-keyframes blow-shadow {
0% {
box-shadow: -4em 0 0 0.015em #083D56, 4em 0 0 0.015em #083D56;
}
75%, 100% {
box-shadow: 0 0 0 0.4em #083D56, 0 0 0 0.4em #083D56;
}
}
@keyframes blow-shadow {
0% {
box-shadow: -4em 0 0 0.015em #083D56, 4em 0 0 0.015em #083D56;
}
75%, 100% {
box-shadow: 0 0 0 0.4em #083D56, 0 0 0 0.4em #083D56;
}
}
@-webkit-keyframes blow-grow {
0% {
transform: scale(0);
background-color: #083D56;
}
25% {
transform: scale(0.5);
background-color: #083D56;
}
50% {
transform: scale(1);
background-color: #0E5F76;
}
75% {
transform: scale(1.5);
background-color: #0E5F76;
}
100% {
transform: scale(2);
background-color: #19A6CF;
}
}
@keyframes blow-grow {
0% {
transform: scale(0);
background-color: #083D56;
}
25% {
transform: scale(0.5);
background-color: #083D56;
}
50% {
transform: scale(1);
background-color: #0E5F76;
}
75% {
transform: scale(1.5);
background-color: #0E5F76;
}
100% {
transform: scale(2);
background-color: #19A6CF;
}
}
.loader-pendulums {
font-size: 2rem;
width: 2em;
height: 2em;
border-radius: 50%;
background-image: radial-gradient(circle at center center, #083D56 0%, #083D56 32.9%, transparent 33%, transparent 100%);
border: 0.1em solid rgba(8, 61, 86, 0.25);
}
.loader-pendulums:before, .loader-pendulums:after {
content: "";
width: 2em;
height: 2em;
left: -0.1em;
top: -0.1em;
padding: 0.1em;
display: block;
border-radius: 50%;
position: absolute;
transform-origin: center center;
border: 0.1em solid;
border-color: #19A6CF transparent transparent transparent;
-webkit-animation: pendulum infinite 2s cubic-bezier(0.3, 1.65, 0.7, -0.65);
animation: pendulum infinite 2s cubic-bezier(0.3, 1.65, 0.7, -0.65);
}
.loader-pendulums:before {
border-color: #0E5F76 transparent transparent transparent;
-webkit-animation-delay: -1s;
animation-delay: -1s;
-webkit-animation-name: pendulum2;
animation-name: pendulum2;
}
@-webkit-keyframes pendulum {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
@keyframes pendulum {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
@-webkit-keyframes pendulum2 {
from {
transform: rotate(180deg);
}
to {
transform: rotate(520deg);
}
}
@keyframes pendulum2 {
from {
transform: rotate(180deg);
}
to {
transform: rotate(520deg);
}
}
.loader-wheel-of-fortune {
font-size: 0.66em;
width: 5em;
height: 5em;
border-radius: 50%;
position: relative;
z-index: 0;
color: rgba(25, 166, 207, 0.75);
border: 0.1em solid #0E5F76;
}
#toggle:checked ~ #sect .loader-wheel-of-fortune {
filter: drop-shadow(0.1em 0.1em 0.1em rgba(0, 0, 0, 0.5));
text-shadow: 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.75);
}
.loader-wheel-of-fortune:before, .loader-wheel-of-fortune:after {
content: "";
color: #19A6CF;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border-width: 2.25em;
border-style: solid;
border-color: #0E5F76 #081E3F;
z-index: -1;
opacity: 0.5;
-webkit-animation: wheel-of-fortune 5s cubic-bezier(0.5, 0.8, 0.5, 0.2) infinite;
animation: wheel-of-fortune 5s cubic-bezier(0.5, 0.8, 0.5, 0.2) infinite;
}
#toggle:checked ~ #sect .loader-wheel-of-fortune:before, #toggle:checked ~ #sect .loader-wheel-of-fortune:after {
content: "°";
}
#toggle:checked ~ #sect .loader-wheel-of-fortune:before, #toggle:checked ~ #sect .loader-wheel-of-fortune:after {
-webkit-animation: wheel-of-fortune 5s cubic-bezier(0.5, 0.8, 0.5, 0.2) infinite, wheel-of-fortune-blur 5s ease-in-out infinite;
animation: wheel-of-fortune 5s cubic-bezier(0.5, 0.8, 0.5, 0.2) infinite, wheel-of-fortune-blur 5s ease-in-out infinite;
}
.loader-wheel-of-fortune:after {
border-color: #083D56 #0E5F76;
transform: rotate(225deg);
-webkit-animation-name: wheel-of-fortune-2;
animation-name: wheel-of-fortune-2;
}
#toggle:checked ~ #sect .loader-wheel-of-fortune:after {
-webkit-animation-name: wheel-of-fortune-2, wheel-of-fortune-blur;
animation-name: wheel-of-fortune-2, wheel-of-fortune-blur;
}
@-webkit-keyframes wheel-of-fortune {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(1795deg);
}
}
@keyframes wheel-of-fortune {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(1795deg);
}
}
@-webkit-keyframes wheel-of-fortune-2 {
0% {
transform: rotate(225deg);
}
100% {
transform: rotate(2020deg);
}
}
@keyframes wheel-of-fortune-2 {
0% {
transform: rotate(225deg);
}
100% {
transform: rotate(2020deg);
}
}
@-webkit-keyframes wheel-of-fortune-blur {
0%, 100% {
filter: blur(3px);
}
50% {
filter: blur(0px);
}
}
@keyframes wheel-of-fortune-blur {
0%, 100% {
filter: blur(3px);
}
50% {
filter: blur(0px);
}
}
.loader-gears {
position: relative;
width: 3em;
height: 3em;
overflow: hidden;
border-radius: 0.25em;
box-shadow: 0 0 0 0.1em #083D56, inset 0 0 0 3em rgba(8, 61, 86, 0.5);
}
#toggle:checked ~ #sect .loader-gears {
filter: drop-shadow(0.5em 0.5em 0.25em rgba(0, 0, 0, 0.25));
}
.loader-gears:before, .loader-gears:after {
content: "";
z-index: 1;
display: block;
position: absolute;
width: 2.7em;
height: 2.7em;
border-radius: 50%;
border: 0.16em dashed #081E3F;
box-shadow: inset 0 0 0 0.9em #081E3F;
-webkit-animation: gear-rotate infinite linear 3s forwards;
animation: gear-rotate infinite linear 3s forwards;
}
.loader-gears:before {
left: -0.7em;
top: 1.1em;
}
#toggle:not(:checked) ~ #sect .loader-gears:before {
filter: drop-shadow(0 0 1.15em #19a6cf);
}
#toggle:checked ~ #sect .loader-gears:before {
-webkit-animation: gear-rotate infinite linear 3s forwards, gear-glow infinite linear 6s forwards;
animation: gear-rotate infinite linear 3s forwards, gear-glow infinite linear 6s forwards;
}
.loader-gears:after {
left: 1.15em;
top: -0.85em;
animation-direction: reverse;
}
@-webkit-keyframes gear-rotate {
to {
transform: rotate(359deg);
}
}
@keyframes gear-rotate {
to {
transform: rotate(359deg);
}
}
@-webkit-keyframes gear-glow {
0%, 100% {
filter: drop-shadow(0 0 0 rgba(25, 166, 207, 0));
}
60% {
filter: drop-shadow(0 0 1.75em #19a6cf);
}
}
@keyframes gear-glow {
0%, 100% {
filter: drop-shadow(0 0 0 rgba(25, 166, 207, 0));
}
60% {
filter: drop-shadow(0 0 1.75em #19a6cf);
}
}
.loader-wiggle {
border-radius: 50%;
width: 4em;
height: 4em;
opacity: 0.5;
background-color: #083D56;
position: relative;
}
.loader-wiggle:before, .loader-wiggle:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 0;
border-radius: 50%;
background-color: #f0f;
mix-blend-mode: screen;
}
.loader-wiggle:after {
background-color: #0ff;
-webkit-animation: wiggle-r 1s cubic-bezier(0.5, 0.8, 0.5, 0.2) infinite forwards;
animation: wiggle-r 1s cubic-bezier(0.5, 0.8, 0.5, 0.2) infinite forwards;
}
.loader-wiggle:before {
-webkit-animation: wiggle-l 1s cubic-bezier(0.5, 0.8, 0.5, 0.2) infinite forwards;
animation: wiggle-l 1s cubic-bezier(0.5, 0.8, 0.5, 0.2) infinite forwards;
}
@-webkit-keyframes wiggle-l {
0%, 15%, 25%, 100% {
transform: translate(0, 0);
}
17% {
transform: translate(-20%, 0);
}
22% {
transform: translate(30%, 0);
}
24% {
transform: translate(-10%, 0);
}
}
@keyframes wiggle-l {
0%, 15%, 25%, 100% {
transform: translate(0, 0);
}
17% {
transform: translate(-20%, 0);
}
22% {
transform: translate(30%, 0);
}
24% {
transform: translate(-10%, 0);
}
}
@-webkit-keyframes wiggle-r {
0%, 25%, 35%, 100% {
transform: translate(0, 0);
}
27% {
transform: translate(20%, 0);
}
32% {
transform: translate(-30%, 0);
}
34% {
transform: translate(10%, 0);
}
}
@keyframes wiggle-r {
0%, 25%, 35%, 100% {
transform: translate(0, 0);
}
27% {
transform: translate(20%, 0);
}
32% {
transform: translate(-30%, 0);
}
34% {
transform: translate(10%, 0);
}
}
.loader-drip {
color: #19A6CF;
position: relative;
}
#toggle:checked ~ #sect .loader-drip {
filter: url("#filter-goo2");
}
.loader-drip:before, .loader-drip:after {
content: "";
background-color: currentColor;
position: absolute;
}
.loader-drip:before {
width: 3px;
height: 1px;
z-index: 2;
top: calc(1em - 1px);
left: 90%;
border-radius: 0% 40% 40% 0%;
-webkit-animation: drip-line 5s 2s cubic-bezier(0.5, 0.8, 0.5, 0.2) infinite forwards;
animation: drip-line 5s 2s cubic-bezier(0.5, 0.8, 0.5, 0.2) infinite forwards;
}
#toggle:checked ~ #sect .loader-drip:before {
filter: url("#turbulence-4");
}
.loader-drip:after {
width: 1px;
height: 1px;
top: 1em;
left: 90%;
z-index: 0;
border-radius: 0 50% 50% 50%;
transform: rotate(45deg) translate(-33%, 0%);
-webkit-animation: drip 5s 2s cubic-bezier(0.5, 0.8, 0.5, 0.2) infinite forwards;
animation: drip 5s 2s cubic-bezier(0.5, 0.8, 0.5, 0.2) infinite forwards;
}
#toggle:checked ~ #sect .loader-drip:after {
filter: url("#turbulence-3");
box-shadow: inset -0.15em 0 0.15em rgba(0, 0, 0, 0.24);
}
@-webkit-keyframes drip-line {
to {
height: 1.2em;
}
}
@keyframes drip-line {
to {
height: 1.2em;
}
}
@-webkit-keyframes drip {
to {
top: 2em;
width: 7px;
height: 7px;
}
}
@keyframes drip {
to {
top: 2em;
width: 7px;
height: 7px;
}
}
.loader-3-dots {
--pos: 10%;
--post: 10.1%;
width: 4em;
height: 1em;
position: relative;
}
.loader-3-dots:before, .loader-3-dots:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.loader-3-dots, .loader-3-dots:before, .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0