div+css实现6种不同的loading加载动画效果代码
代码语言：html
所属分类：加载滚动
代码描述：div+css实现6种不同的loading加载动画效果代码
代码标签： div css 不同 loading 加载 动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&display=swap');
.uia-loader {
--_uia-loader-size_default: 5rem;
--_uia-loader-main-aligment: var(--uia-loader-main-aligment, center);
/*
inline-size: var(--uia-loader-main-size, var(--_uia-loader-size_default));
block-size: var(--uia-loader-extra-size, var(--_uia-loader-size_default));
*/
display: var(--uia-loader-display, grid);
gap: var(--uia-loader-caption-gap, 0.5rem);
justify-items: var(--_uia-loader-main-aligment);
}
.uia-loader__canvas {
--_uia-loader-canvas-size: var(--uia-loader-canvas-size, 3rem);
box-sizing: border-box;
inline-size: var(--uia-loader-canvas-main-size, var(--_uia-loader-canvas-size));
block-size: var(--uia-loader-canvas-extra-size, var(--_uia-loader-canvas-size));
padding: var(--uia-loader-canvas-safe-gap, 0.25rem);
display: var(--uia-loader-canvas-display, grid);
justify-items: var(--_uia-loader-main-aligment);
align-items: var(--uia-loader-canvas-extra-aligment, center);
}
[data-uia-loader-adapter-skin-1="ui-clippy-loader-skin-#1"] {
--uia-clippy-loader-size: calc(var(--uia-loader-canvas-main-size) - 0.25rem);
}
[data-uia-loader-skin="1"] .uia-loader__caption {
font-size: var(--uia-loader-caption-font-size);
color: var(--uia-loader-caption-color);
}
.uia-clippy-loader {
--_uia-clippy-loader-size: var(--uia-clippy-loader-size, 2rem);
--_uia-clippy-loader-animation-name: var(--uia-clippy-loader-animation-name);
--_uia-clippy-loader-animation-duration: var(--uia-clippy-loader-animation-duration, 2s);
--_uia-clippy-loader-animation-fill-mode: var(--uia-clippy-loader-animation-fill-mode, both);
--_uia-clippy-loader-animation-iteration-count: var(--uia-clippy-loader-animation-iteration-count, infinite);
--_uia-clippy-loader-stroke: var(--uia-clippy-loader-stroke, 2px);
box-sizing: border-box;
inline-size: var(--_uia-clippy-loader-size);
block-size: var(--_uia-clippy-loader-size);
padding: var(--_uia-clippy-loader-stroke);
background-color: var(--uia-clippy-loader-stroke-color, #222);
animation-name: var(--_uia-clippy-loader-animation-name);
animation-duration: var(--_uia-clippy-loader-animation-duration);
animation-fill-mode: var(--_uia-clippy-loader-animation-fill-mode);
animation-iteration-count: var(--_uia-clippy-loader-animation-iteration-count);
position: relative;
}
.uia-clippy-loader::before {
content: "";
position: absolute;
inset: var(--_uia-clippy-loader-stroke);
background-color: var(--uia-clippy-loader-background-color, #fff);
animation-name: var(--_uia-clippy-loader-animation-name);
animation-duration: var(--_uia-clippy-loader-animation-duration);
animation-fill-mode: var(--_uia-clippy-loader-animation-fill-mode);
animation-iteration-count: var(--_uia-clippy-loader-animation-iteration-count);
}
[data-uia-clippy-loader-skin="1"][data-uia-clippy-loader-mod="1"],
[data-uia-clippy-loader-skin="1"][data-uia-clippy-loader-mod="1"]::before {
--uia-clippy-loader-animation-name: uia-clippy-loader-1;
}
[data-uia-clippy-loader-skin="1"][data-uia-clippy-loader-mod="2"],
[data-uia-clippy-loader-skin="1"][data-uia-clippy-loader-mod="2"]::before {
--uia-clippy-loader-animation-name: uia-clippy-loader-2;
}
[data-uia-clippy-loader-skin="1"][data-uia-clippy-loader-mod="3"],
[data-uia-clippy-loader-skin="1"][data-uia-clippy-loader-mod="3"]::before {
--uia-clippy-loader-animation-name: uia-clippy-loader-3;
}
@keyframes uia-clippy-loader-1 {
0%, 30% {
clip-path: polygon(0 15%, 0 0, 85% 0, 85% 0, 100% 0, 100% 85%, 100% 85%, 100% 100%, 15% 100%, 15% 100%, 0 100%, 0 15%);
}
70%, 100% {
clip-path: polygon(0 0, 85% 0, 85% 0, 100% 0, 100% 85%, 100% 85%, 100% 100%, 15% 100%, 15% 100%, 0 100%, 0 15%, 0 15%);
}
}
@keyframes uia-clippy-loader-2 {
0%, 20% {
clip-path: polygon(0% 0, 100% 0%, 100% 50%, 100% 100%, 0% 100%, 0 50%);
}
40%, 60% {
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0% 25%);
}
80%, 100% {
clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
}
}
@keyframes uia-clippy-loader-3 {
0%, 20% {
clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
}
40%, 60% {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
80%, 100% {
clip-path: polygon(100% 0%, 100% 100%, 0 100%, 0% 0%);
}
}
.uia-square-loader {
--_uia-square-loader-size_default: 2rem;
--_uia-square-loader-little-size_default: 20%;
--_uia-square-loader-color: var(--uia-square-loader-color, #222);
box-sizing: border-box;
inline-size: var(--uia-square-loader-size, var(--_uia-square-loader-size_default));
block-size: var(--uia-square-loader-size, var(--_uia-square-loader-size_default));
border: var(--uia-square-loader-border-thickness, 2px) var(--uia-square-loader-border-style, solid) var(--uia-square-loader-border-color, var(--_uia-square-loader-color));
display: grid;
place-items: center;
}
.uia-square-loader::before {
content: "";
inline-size: var(--_uia-square-loader-little-size, var(--_uia-square-loader-little-size_default));
height: var(--_uia-square-loader-little-size, var(--_uia-square-loader-little-size_default));
background-color: var(--uia-square-loader-little-background-color, var(--_uia-square-loader-color));
animation-name: uia-square-loader;
animation-duration: var(--uia-square-loader-animation-duration, 4s);
animation-direction: var(--uia-square-loader-animation-direction, alternate);
animation-fill-mode: var(--uia-square-loader-animation-fill-mode, both);
animation-timing-function: var(--uia-square-loader-animation-timing-function, ease-out);
animation-iteration-count: var(--uia-square-loader-animation-iteration-count, infinite);
}
@keyframes uia-square-loader {
0%, 10%, 90%, 100%{
transform: translate3d(0, 0, 0) scale(0);
}
20%{
transform: translate3d(0, 0, 0) scale(1);
}
30%{
transform: translate3d(-100%, -100%, 0) scale(1);
}
40%{
transform: translate3d(100%, -100%, 0) scale(1);
}
50%{
transform: translate3d(100%, 100%, 0) scale(1);
}
60%{
transform: translate3d(-100%, 100%, 0) scale(1);
}
70%{
transform: translate3d(0, 0, 0) scale(1);
}
}
@media (prefers-reduced-motion: reduce){
.uia-square-loader {
--uia-aquare-loader-animation-duration: 14s;
}
}
.uia-tennis-loader {
--_uia-tennis-loader-size_default: 2.5rem;
--_uia-tennis-loader-size: var(--uia-tennis-loader-size, var(--_uia-tennis-loader-size_default));
--_uia-tennis-racket-thickness: var(--uia-tennis-racket-thickness, 3px);
--_uia-tennis-loader-color: var(--uia-tennis-loader-color, #222);
--_uia-tennis-loader-animation-duration_default: 0.65s;
--_uia-tennis-loader-animation-timing-function_default: linear;
box-sizing: border-box;
inline-size: var(--_uia-tennis-loader-size);
block-size: var(--_uia-tennis-loader-size);
position: relative;
}
.uia-tennis-loader::before,
.uia-tennis-loader::after {
content: "";
inline-size: var(--_uia-tennis-racket-thickness);
block-size: var(--uia-tennis-racket-height, 50%);
background-color: var(--uia-tennis-loader-punch-color, var(--_uia-tennis-loader-color));
position: absolute;
inset-block-start: 40%;
animation-name: uia-tennis-loader-punch;
animation-duration: var(--uia-tennis-loader-punch-animation-duration, var(--_uia-tennis-loader-animation-duration_default));
animation-direction: var(--uia-tennis-loader-punch-animation-direction, alternate);
animation-fill-mode: var(--uia-tennis-loader-punch-animation-fill-mode, both);
animation-timing-function: var(--uia-tennis-loader-punch-animation-timing-function, var(--_uia-tennis-loader-animation-timing-function_default));
animation-iteration-count: var(--uia-tennis-loader-punch-animation-iteration-count, infinite);
}
.uia-tennis-loader::before {
inset-inline-start: 0;
}
.uia-tennis-loader::after {
inset-i.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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