web-html5-scripts/loading-icons/autonomous-arrows/index.html

80 lines
2.1 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Autonomous Arrows</title>
<link rel='stylesheet' href='https://pro.fontawesome.com/releases/v5.11.2/css/all.css'>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="circles">
<div class="circle" style="--animation-delay:-1;">
<div class="inner">
<div class="dot fas fa-arrow-right"></div>
</div>
</div>
<div class="circle" style="--animation-delay:-2;">
<div class="inner">
<div class="dot fas fa-arrow-right"></div>
</div>
</div>
<div class="circle" style="--animation-delay:-3;">
<div class="inner">
<div class="dot fas fa-arrow-right"></div>
</div>
</div>
<div class="circle" style="--animation-delay:-4;">
<div class="inner">
<div class="dot fas fa-arrow-right"></div>
</div>
</div>
<div class="circle" style="--animation-delay:-5;">
<div class="inner">
<div class="dot fas fa-arrow-right"></div>
</div>
</div>
<div class="circle" style="--animation-delay:-6;">
<div class="inner">
<div class="dot fas fa-arrow-right"></div>
</div>
</div>
<div class="circle" style="--animation-delay:-7;">
<div class="inner">
<div class="dot fas fa-arrow-right"></div>
</div>
</div>
<div class="circle" style="--animation-delay:-8;">
<div class="inner">
<div class="dot fas fa-arrow-right"></div>
</div>
</div>
<div class="circle" style="--animation-delay:-9;">
<div class="inner">
<div class="dot fas fa-arrow-right"></div>
</div>
</div>
<div class="circle" style="--animation-delay:-10;">
<div class="inner">
<div class="dot fas fa-arrow-right"></div>
</div>
</div>
<div class="circle" style="--animation-delay:-11;">
<div class="inner">
<div class="dot fas fa-arrow-right"></div>
</div>
</div>
<div class="circle" style="--animation-delay:-12;">
<div class="inner">
<div class="dot fas fa-arrow-right"></div>
</div>
</div>
<div class="circle" style="--animation-delay:-13;">
<div class="inner">
<div class="dot fas fa-arrow-right"></div>
</div>
</div>
</div>
</body>
</html>