三角形分割合成loading加载动画
代码语言：html
所属分类：加载滚动
代码描述：三角形分割合成loading加载动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html {
background-color: black;
display: flex;
height: 100%;
width: 100%;
}
body {
align-items: center;
display: flex;
flex: 1;
justify-content: center;
}
#loading {
clip-path: polygon(0% 0%, 0% 100%, 42.3% 100%, 42.3% 71.8%, 49.85% 56.2%, 57.7% 71.8%, 30.6% 71.8%, 27% 100%, 100% 100%, 100% 0%);
height: 100px;
position: relative;
transform-origin: 50% 66.66%;
width: 100px;
}
svg {
display: block;
}
g {
position: relative;
}
.triangle {
fill: #F8D872;
stroke: #F8D872;
}
#triangle, #triangle-2 {
height: 100%;
transform-origin: 50% 66.66%;
width: 100%;
}
#triangle {
left: 0;
position: absolute;
top: 0;
}
.fill {
fill: black;
stroke: black;
}
#fill-1-1, #fill-1-2 {
transform-origin: 22.5px 209.1px;
}
#fill-2-1, #fill-2-2 {
transform-origin: 67.6px 209.1px;
}
#fill-3-1, #fill-3-2 {
transform-origin: 45.07px 199.1px;
}
#fill-4-1, #fill-4-2 {
transform-origin: 90.7px 199.1px;
}
#fill-5-1, #fill-5-2 {
transform-origin: 112.6px 209.1px;
}
#fill-6-1, #fill-6-2 {
transform-origin: 135.07px 199.1px;
}
#fill-7-1, #fill-7-2 {
transform-origin: 45.07px 165.1px;
}
#fill-8-1, #fill-8-2 {
transform-origin: 157.6px 209.1px;
}
#fill-9-1, #fill-9-2 {
transform-origin: 180.07px 199.1px;
}
#fill-10-1, #fill-10-2 {
transform-origin: 202.6px 209.1px;
}
#fill-11-1, #fill-11-2 {
transform-origin: 67.6px 155.1px;
}
#fill-12-1, #fill-12-2 {
transform-origin: 180.07px 165.1px;
}
#fill-13-1, #fill-13-2 {
transform-origin: 67.6px 122.1px;
}
#fill-14-1, #fill-14-2 {
transform-origin: 157.6px 155.1px;
}
#fill-15-1, #fill-15-2 {
transform-origin: 157.6px 122.1px;
}
#fill-16-1-1, #fill-16-1-2 {
transform-origin: 90.07px 108.1px;
}
#fill-16-2-1, #fill-16-2-2 {
transform-origin: 135.07px 108.1px;
}
#fill-17-1, #fill-17-2 {
transform-origin: 135.07px 76.1px;
}
#fill-18-1, #fill-18-2 {
transform-origin: 90.07px 76.1px;
}
#fill-19-1, #fill-19-2 {
transform-origin: 112.6px 62.1px;
}
#fill-20-1, #fill-20-2 {
transform-origin: 112.6px 30.1px;
}
</style>
</head>
<body translate="no">
<div class="loading" id="loading">
<svg id="triangle" viewBox="0 0 226 226" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
<g class="group--1">
<path class="triangle" id="triangle-1-1" d=" M 22.5 180.1
l -22.5 45
h 45
z" />
<path class="fill" id="fill-1-1" d=" M 22.5 180.1
l -22.5 45
h 45
z" />
</g>
<g class="group--3">
<path class="triangle" id="triangle-3-1" d=" M 45.07 225.099
l -22.5 -45
h 45
z" />
<path class="fill" id="fill-3-1" d=" M 45.07 225.099
l -22.5 -45
h 45
z" />
</g>
<g class="group--2">
<path class="triangle" id="triangle-2-1" d=" M 67.6 180.1
l -22.5 45
h 45
z" />
<path class="fill" id="fill-2-1" d=" M 67.6 180.1
l -22.5 45
h 45
z" />
</g>
<g class="group--4">
<path class="triangle" id="triangle-4-1" d=" M 90.07 225.099
l -22.5 -45
h 45
z" />
<path class="fill" id="fill-4-1" d=" M 90.07 225.099
l -22.5 -45
h 45
z" />
</g>
<g class="group--5">
<path class="triangle" id="triangle-5-1" d=" M 112.6 180.1
l -22.5 45
h 45
z" />
<path class="fill" id="fill-5-1" d=" M 112.6 180.1
l -22.5 45
h 45
z" />
</g>
<g class="group--6">
<path class="triangle" id="triangle-6-1" d=" M 135.07 225.099
l -22.5 -45
h 45
z" />
<path class="fill" id="fill-6-1" d=" M 135.07 225.099
l -22.5 -45
h 45
z" />
</g>
<g class="group--7">
<path class="triangle" id="triangle-7-1" d="
M 45.07 135.1
l 22.5 45
h -45
z " />
<path class="fill" id="fill-7-1" d="
M 45.07 135.1
l 22.5 45
h -45
z" />
</g>
<g class="group--8">
<path class="triangle" id="triangle-8-1" d=" M 157.6 180.1
l -22.5 45
h 45
z" />
<path class="fill" id="fill-8-1" d=" M 157.6 180.1
l -22.5 45
h 45
z" />
</g>
<g class="group--9">
<path class="triangle" id="triangle-9-1" d=" M 180.07 225.099
l -22.5 -45
h 45
z" />
<path class="fill" id="fill-9-1" d=" M 180.07 225.099
l -22.5 -45
h 45
z" />
</g>
<g class="group--10">
<path class="triangle" id="triangle-10-1" d=" M 202.6 180.1
l -22.5 45
h 45
z" />
<path class="fill" id="fill-10-1" d=" M 202.6 180.1
l -22.5 45
h 45
z" />
</g>
<g class="group--11">
<path class="triangle" id="triangle-11-1" d=" M 67.6 180.099
l 22.5 -45
h -45
z" />
<path class="fill" id="fill-11-1" d=" M 67.6 180.099
l 22.5 -45
h -45
z" />
</g>
<g class="group--12">
<path class="triangle" id="triangle-12-1" d=" M 180.07 135.1
l 22.5 45
h -45
z " />
<path class="fill" id="fill-12-1" d=" M 180.07 135.1
l 22.5 45
h -45
z " />
</g>
<g class="group--13">
<path class="triangle" id="triangle-13-1" d=" M 67.6 90.1
l 22.5 45
h -45
z " />
<path class="fill" id="fill-13-1" d=" M 67.6 90.1
l 22.5 45
h -45
z " />
</g>
<g class="group--14">
<path class="triangle" id="triangle-14-1" d=" M 157.6 180.099
l -22.5 -45
h 45
z" />
<path class="fill" id="fill-14-1" d=" M 157.6 180.099
l -22.5 -45
h 45
z" />
</g>
<g class="group--15">
<path class="triangle" id="triangle-15-1" d=" M 157.6 90.1
l 22.5 45
h -45
z " />
<path class="fill" id="fill-15-1" d=" M 157.6 90.1
l 22.5 45
h -45
z " />
</g>
<g class="group--16 group--16-1" id="group-16-1">
<path class="triangle" id="triangle-16-1-1" d=" M 90.07 135.099
l 22.5 -45
h -45
z" />
<path class="fill fill--16" id="fill-16-1-1" d=" M 90.07 135.099
l 22.5 -45
h -45
z" />
</g>
<g class="group--16 group--16-2" id="group-16-2">
<path class="triangle" id="triangle-16-2-1" d="
M 135.07 135.099
l -22.5 -45
h 45
z" />
<path class="fill fill--16" id="fill-16-2-1" d="
M 135.07 135.099
l -22.5 -45
h 45
z" />
</g>
<g class="group--17">
<path class="triangle" id="triangle-17-1" d=" M 135.07 45
l 22.5 45
h -45
z " />
<path class="fill" id="fill-17-1" d=" M 135.07 45
l 22.5 45
h -45
z " />
</g>
<g class="group--18">
<path class="triangle" id="triangle-18-1" d=" M 90.07 45
l 22.5 45
h -45
z " />
<path class="fill" id="fill-18-1" d=" M 90.07 45
l 22.5 45
h -45
z " />
</g>
<g class="group--19">
<path class="triangle" id="triangle-19-1" d=" M 135.07 45
h -45
l 22.5 45
z " />
<path class="fill" id="fill-19-1" d=" M 135.07 45
h -45
l 22.5 45
z " />
</g>
<g class="group--20">
<path class="triangle" id="triangle-20-1" d=" M 112.6.1
l 22.5 45
h -45
z " />
<path class="fill" id="fill-20-1" d=" M 112.6.1
l 22.5 45
h -45
z " />
</g>
</svg>
<svg id="triangle-2" viewBox="0 0 226 226" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
<g class="group--1">
<path class="triangle" id="triangle-1-2" d=" M 22.5 180.1
l -22.5 45
h 45
z" />
<path class="fill" id="fill-1-2" d=" M 22.5 180.1
l -22.5 45
h 45
z" />
</g>
<g class="group--3">
<path class="triangle" id="triangle-3-2" d=" M 45.07 225.099
l -22.5 -45
h 45
z" />
<path class="fill" id="fill-3-2" d=" M 45.07 225.099
l -22.5 -45
h 45
z" />
</g>
<g class="group--2">
<path class="triangle" id="triangle-2-2" d=" M 67.6 180.1
l -22.5 45
h 45
z" />
<path class="fill" id="fill-2-2" d=" M 67.6 180.1
l -22.5 45
h 45
z" />
</g>
<g class="group--4">
<path class="triangle" id="triangle-4-2" d=" M 90.07 225.099
l -22.5 -45
h 45
z" />
<path class="fill" id="fill-4-2" d=" M 90.07 225.099
l -22.5 -45
h 45
z" />
</g>
<g class="group--5">
<path class="triangle" id="triangle-5-2" d=" M 112.6 180.1
l -22.5 45
h 45
z" />
<path class="fill" id="fill-5-2" d=" M 112.6 180.1
l -22.5 45
h 45
z" />
</g>
<g class="group--6">
<path class="triangle" id="triangle-6-2" d=" M 135.07 225.099
l -22.5 -45
h 45
z" />
<path class="fill" id="fill-6-2" d=" M 135.07 225.099
l -22.5 -45
h 45
z" />
</g>
<g class="group--7">
<path class="triangle" id="triangle-7-2" d="
M 45.07 135.1
l 22.5 45
h -45
z " />
<path class="fill" id="fill-7-2" d="
M 45.07 135.1
l 22.5 45
h -45
z" />
</g>
<g class="group--8">
<path class="triangle" id="triangle-8-2" d=" M 157.6 180.1
l -22.5 45
h 45
z" />
<path class="fill" id="fill-8-2" d=" M 157.6 180.1
l -22.5 45
h 45
z" />
</g>
<g class="group--9">
<path class="triangle" id="triangle-9-2" d=" M 180.07 225.099
l -22.5 -45
h 45
z" />
<path class="fill" id="fill-9-2" d=" M 180.07 225.099
l -22.5 -45
h 45
z" />
</g>
<g class="group--10">
<path class="triangle" id="triangle-10-2" d=" M 202.6 180.1
l -22.5 45
h 45
z" />
<path class="fill" id="fill-10-2" d=" M 202.6 180.1
l -22.5 45
h 45
z" />
</g>
<g class="group--11">
<path class="triangle" id="triangle-11-2" d=" M 67.6 180.099
l 22.5 -45
h -45
z" />
<path class="fill" id="fill-11-2" d=" M 67.6 180.099
l 22.5 -45
h -45
z" />
</g>
<g class="group--12">
<path class="triangle" id="triangle-12-2" d=" M 180.07 135.1
l 22.5 45
h -45
z " />
<path class="fill" id="fill-12-2" d=" M 180.07 135.1
l 22.5 45
h -45
z " />
</g>
<g class="group--13">
<path class="triangle" id="triangle-13-2" d=" M 67.6 90.1
l 22.5 45
h -45
z " />
<path class="fill" id="fill-13-2" d=" M 67.6 90.1
l 22.5 45
h -45
z " />
</g>
<g class="group--14">
<path class="triangle" id="triangle-14-2" d=" M 157.6 180.099
l -22.5 -45
h 45
z" />
<path class="fill" id="fill-14-2" d=" M 157.6 180.099
l -22.5 -45
h 45
z" />
</g>
<g class="group--15">
<path class="triangle" id="triangle-15-2" d=" M 157.6 90.1
l 22.5 45
h -45
z " />
<path class="fill" id="fill-15-2" d=" M 157.6 90.1
l 22.5 45
h -45
z " />
</g>
<g class="group--16 group--16-1" id="group-16-1-2">
<path class="triangle" id="triangle-16-1-2" d=" M 90.07 135.099
l 22.5 -45
h -45
z" />
<path class="fill fill--16" id="fill-16-1-2" d=" M 90.07 135.099
l 22.5 -45
h -45
z" />
</g>
<g class="group--16 group--16-2" id="group-16-2-2">
<path class="triangle" id="triangle-16-2-2" d="
M 135.07 135.099
l -22.5 -45
h 45
z" />
<path class="fill fill--16" id="fill-16-2-2" d="
M 135.07 135.099
l -22.5 -45
h 45
z" />
</g>
<g class="group--17">
<path class="triangle" id="triangle-17-2" d=" M 135.07 45
l 22.5 45
h -45
z " />
<path class="fill" id="fill-17-2" d=" M 135.07 45
l 22.5 45
h -45
z " />
</g>
<g class="group--18">
<path class="triangle" id="triangle-18-2" d=" M 90.07 45
l 22.5 45
h -45
z " />
<path class="fill" id="fill-18-2" d=" M 90.07 45
l 22.5 45
h -45
z " />
</g>
<g class="group--19">
<path class="triangle" id="triangle-19-2" d=" M 135.07 45
h -45
l 22.5 45
z " />
<path class="fill" id="fill-19-2" d=" M 135.07 45
h -45
l 22.5 45
z " />
</g>
<g class="group--20">
<path class="triangle" id="triangle-20-2" d=" M 112.6.1
l 22.5 45
h -45
z " />
<path class="fill" id="fill-20-2" d=" M 112.6.1
l 22.5 45
h -45
z " />
</g>
</svg>
</div>
<script >
const durationFraction = 0.5;
const duration = 92 / 30 * 1000;
const durationRotate = 288 / 30 * 1000;
const insetDelay = 0.50;
const offset = 12 / 96;
const offsetScale = 30 / 96;
document.querySelector('#loading').animate([
{ transform: 'rotate(0)' },
{ transform: 'rotate(360deg)' }],
{
duration: durationRotate,
iterations: Infinity });
document.querySelector('#triangle').animate([
{ transform: 'scale(1)' },
{ transform: 'scale(0.4)' },
{ transform: 'scale(0.16)' }],
{
duration: duration,
iterations: Infinity,
iterationStart: insetDelay });
document.querySelector('#triangle-2').animate([
{ transform: 'scale(1)' },
{ transform: 'scale(0.4)' },
{ transform: 'scale(0.16)' }],
{
duration: duration,
iterations: Infinity });
document.querySelector('#triangle-1-1').animate([
{ opacity: '0' },
{ opacity: '1', offset: offset },
{ opacity: '1' }],
{
duration: duration,
iterations: Infinity,
iterationStart: insetDelay });
document.querySelector('#fill-1-1').animate([
{ transform: 'scale(1)' },
{ transform: 'scale(0)', offset: offsetScale },
{ transform: 'scale(0)' }],
{
duration: duration,
iterations: Infinity,
iterationStart: insetDelay });
document.querySelector('#triangle-2-1').animate([
{ opacity: '0' },
{ opacity: '0', offset: 1 / 19 * durationFraction },
{ opacity: '1', offset: offset + 1 / 19 * durationFraction },
{ opacity: '1' }],
{
duration: duration,
iterations: Infinity,
iterationStart: insetDelay });
document.querySelector('#fill-2-1').animate([
{ transform: 'scale(1)' },
{ transform: 'scale(1)', offset: 1 / 19 * durationFraction },
{ transform: 'scale(0)', offset: offsetScale + 1 / 19 * durationFraction },
{ transform: 'scale(0)' }],
{
duration: duration,
iterations: Infinity,
iterationStart: insetDelay });
document.querySelector('#triangle-3-1').animate([
{ opacity: '0' },
{ opacity: '0', offset: 2 / 19 * durationFraction },
{ opacity: '1', offset: offset + 2 / 19 * durationFraction },
{ opacity: '1' }],
{
duration: duration,
iterations: Infinity,
iterationStart: insetDelay });
document.querySelector('#fill-3-1').animate([
{ transform: 'scale(1)' },
{ transform: 'scale(1)', offset: 2 / 19 * durationFraction },
{ transform: 'scale(0)', offset: offsetScale + 2 / 19 * durationFraction },
{ transform: 'scale(0)' }],
{
duration: duration,
iterations: Infinity,
iterationStart: insetDelay });
document.querySelector('#triangle-4-1').animate([
{ opacity: '0' },
{ opacity: '0', offset: 3 / 19 * durationFraction },
{ opacity: '1', offset: offset + 3 / 19 * durationFraction },
{ opacity: '1' }],
{
duration: duration,
iterations: Infinity,
iterationStart: insetDelay });
document.querySelector('#fill-4-1').animate([
{ transform: 'scale(1)' },
{ transform: 'scale(1)', offset: 3 / 19 * durationFraction },
{ transform: 'scale(0)', offset: offsetScale + 3 / 19 * durationFraction },
{ transform: 'scale(0)' }],
{
duration: duration,
iterations: Infinity,
iterationStart: insetDelay });
document.querySelector('#triangle-5-1').animate([
{ opacity: '0' },
{ opacity: '0', offset: 4 / 19 * durationFraction },
{ opacity: '1', offset: offset + 4 / 19 * durationFraction },
{ opacity: '1' }],
{
duration: duration,
iterations: Infinity,
iterationStart: insetDelay });
document.querySelector('#fill-5-1').animate([
{ transform: 'scale(1)' },
{ transform: 'scale(1)', offset: 4 / 19 * durationFraction },
{ transform: 'scale(0)', offset: offsetScale + 4 / 19 * durationFraction },
{ transform: 'scale(0)' }],
{
duration: duration,
iterations: Infinity,
iterationStart: insetDelay });
document.querySelector('#triangle-6-1').animate([
{ opacity: '0' },
{ opacity: '0', offset: 5 / 19 * durationFraction },
{ opacity: '1', offset: offset + 5 / 19 * durationFraction },
{ opacity: '1' }],
{
duration: duration,
iterations: Infinity,
iterationStart: insetDelay });
document.querySelector('#fill-6-1').animate([
{ transform: 'scale(1)' },
{ transform: 'scale(1)', offset: 5 / 19 * durationFraction },
{ transform: 'scale(0)', offset: offsetScale + 5 / 19 * durationFraction },
{ transform: 'scale(0)' }],
{
duration: duration,
iterations: Infinity,
iterationStart: insetDelay });
document.querySelector('#triangle-7-1').animate([
{ opacity: '0' },
{ opacity: '0', offset: 6 / 19 * durationFraction },
{ opacity: '1', offset: offset + 6 / 19 * durationFraction },
{ opacity: '1' }],
{
duration: duration,
iterations: Infinity,
iterationStart: insetD.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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