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 .loade.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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