Skip to content

Commit

Permalink
Added Compass Loader Code (#2313)
Browse files Browse the repository at this point in the history 
* Added Compass Loader

* Added gif

* Added Compass Loader Information in include.js

---------

Co-authored-by: Sophia Brandt <16630701+sophiabrandt@users.noreply.github.com>
  • Loading branch information
@AmanPathan @sophiabrandt
AmanPathan and sophiabrandt committed Oct 24, 2023
1 parent fb66c69 commit d406098
Show file tree
Hide file tree
Showing 4 changed files with 331 additions and 0 deletions.
Binary file added Art/AmanPathan/CompassLoader.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
209 changes: 209 additions & 0 deletions Art/AmanPathan/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,209 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css">
<title>Compass Loader</title>
</head>
<body>
<svg
class="pl"
viewBox="0 0 160 160"
width="160px"
height="160px"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient id="grad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#000" />
<stop offset="100%" stop-color="#fff" />
</linearGradient>
<mask id="mask1">
<rect x="0" y="0" width="160" height="160" fill="url(#grad)" />
</mask>
<mask id="mask2">
<rect x="28" y="28" width="104" height="104" fill="url(#grad)" />
</mask>
</defs>
<g>
<g class="pl__ring-rotate">
<circle
class="pl__ring-stroke"
cx="80"
cy="80"
r="72"
fill="none"
stroke="hsl(223,90%,55%)"
stroke-width="16"
stroke-dasharray="452.39 452.39"
stroke-dashoffset="452"
stroke-linecap="round"
transform="rotate(-45,80,80)"
/>
</g>
</g>
<g mask="url(#mask1)">
<g class="pl__ring-rotate">
<circle
class="pl__ring-stroke"
cx="80"
cy="80"
r="72"
fill="none"
stroke="hsl(193,90%,55%)"
stroke-width="16"
stroke-dasharray="452.39 452.39"
stroke-dashoffset="452"
stroke-linecap="round"
transform="rotate(-45,80,80)"
/>
</g>
</g>
<g>
<g
stroke-width="4"
stroke-dasharray="12 12"
stroke-dashoffset="12"
stroke-linecap="round"
transform="translate(80,80)"
>
<polyline
class="pl__tick"
stroke="hsl(223,10%,90%)"
points="0,2 0,14"
transform="rotate(-135,0,0) translate(0,40)"
/>
<polyline
class="pl__tick"
stroke="hsl(223,10%,90%)"
points="0,2 0,14"
transform="rotate(-90,0,0) translate(0,40)"
/>
<polyline
class="pl__tick"
stroke="hsl(223,10%,90%)"
points="0,2 0,14"
transform="rotate(-45,0,0) translate(0,40)"
/>
<polyline
class="pl__tick"
stroke="hsl(223,10%,90%)"
points="0,2 0,14"
transform="rotate(0,0,0) translate(0,40)"
/>
<polyline
class="pl__tick"
stroke="hsl(223,10%,90%)"
points="0,2 0,14"
transform="rotate(45,0,0) translate(0,40)"
/>
<polyline
class="pl__tick"
stroke="hsl(223,10%,90%)"
points="0,2 0,14"
transform="rotate(90,0,0) translate(0,40)"
/>
<polyline
class="pl__tick"
stroke="hsl(223,10%,90%)"
points="0,2 0,14"
transform="rotate(135,0,0) translate(0,40)"
/>
<polyline
class="pl__tick"
stroke="hsl(223,10%,90%)"
points="0,2 0,14"
transform="rotate(180,0,0) translate(0,40)"
/>
</g>
</g>
<g mask="url(#mask1)">
<g
stroke-width="4"
stroke-dasharray="12 12"
stroke-dashoffset="12"
stroke-linecap="round"
transform="translate(80,80)"
>
<polyline
class="pl__tick"
stroke="hsl(223,90%,80%)"
points="0,2 0,14"
transform="rotate(-135,0,0) translate(0,40)"
/>
<polyline
class="pl__tick"
stroke="hsl(223,90%,80%)"
points="0,2 0,14"
transform="rotate(-90,0,0) translate(0,40)"
/>
<polyline
class="pl__tick"
stroke="hsl(223,90%,80%)"
points="0,2 0,14"
transform="rotate(-45,0,0) translate(0,40)"
/>
<polyline
class="pl__tick"
stroke="hsl(223,90%,80%)"
points="0,2 0,14"
transform="rotate(0,0,0) translate(0,40)"
/>
<polyline
class="pl__tick"
stroke="hsl(223,90%,80%)"
points="0,2 0,14"
transform="rotate(45,0,0) translate(0,40)"
/>
<polyline
class="pl__tick"
stroke="hsl(223,90%,80%)"
points="0,2 0,14"
transform="rotate(90,0,0) translate(0,40)"
/>
<polyline
class="pl__tick"
stroke="hsl(223,90%,80%)"
points="0,2 0,14"
transform="rotate(135,0,0) translate(0,40)"
/>
<polyline
class="pl__tick"
stroke="hsl(223,90%,80%)"
points="0,2 0,14"
transform="rotate(180,0,0) translate(0,40)"
/>
</g>
</g>
<g>
<g transform="translate(64,28)">
<g class="pl__arrows" transform="rotate(45,16,52)">
<path
fill="hsl(3,90%,55%)"
d="M17.998,1.506l13.892,43.594c.455,1.426-.56,2.899-1.998,2.899H2.108c-1.437,0-2.452-1.473-1.998-2.899L14.002,1.506c.64-2.008,3.356-2.008,3.996,0Z"
/>
<path
fill="hsl(223,10%,90%)"
d="M14.009,102.499L.109,58.889c-.453-1.421,.559-2.889,1.991-2.889H29.899c1.433,0,2.444,1.468,1.991,2.889l-13.899,43.61c-.638,2.001-3.345,2.001-3.983,0Z"
/>
</g>
</g>
</g>
<g mask="url(#mask2)">
<g transform="translate(64,28)">
<g class="pl__arrows" transform="rotate(45,16,52)">
<path
fill="hsl(333,90%,55%)"
d="M17.998,1.506l13.892,43.594c.455,1.426-.56,2.899-1.998,2.899H2.108c-1.437,0-2.452-1.473-1.998-2.899L14.002,1.506c.64-2.008,3.356-2.008,3.996,0Z"
/>
<path
fill="hsl(223,90%,80%)"
d="M14.009,102.499L.109,58.889c-.453-1.421,.559-2.889,1.991-2.889H29.899c1.433,0,2.444,1.468,1.991,2.889l-13.899,43.61c-.638,2.001-3.345,2.001-3.983,0Z"
/>
</g>
</g>
</g>
</svg>
</body>
</html>
115 changes: 115 additions & 0 deletions Art/AmanPathan/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--bg: hsl(var(--hue), 90%, 25%);
--fg: hsl(var(--hue), 10%, 90%);
--trans-dur: 0.3s;
font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
}
body {
background: #000;
color: var(--fg);
font: 1em/1.5 sans-serif;
height: 100vh;
display: grid;
place-items: center;
}
.pl {
display: block;
width: 9.375em;
height: 9.375em;
}
.pl__arrows,
.pl__ring-rotate,
.pl__ring-stroke,
.pl__tick {
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.pl__arrows {
animation-name: arrows;
transform: rotate(45deg);
transform-origin: 16px 52px;
}
.pl__ring-rotate,
.pl__ring-stroke {
transform-origin: 80px 80px;
}
.pl__ring-rotate {
animation-name: ringRotate;
}
.pl__ring-stroke {
animation-name: ringStroke;
transform: rotate(-45deg);
}
.pl__tick {
animation-name: tick;
}
.pl__tick:nth-child(2) {
animation-delay: -1.75s;
}
.pl__tick:nth-child(3) {
animation-delay: -1.5s;
}
.pl__tick:nth-child(4) {
animation-delay: -1.25s;
}
.pl__tick:nth-child(5) {
animation-delay: -1s;
}
.pl__tick:nth-child(6) {
animation-delay: -0.75s;
}
.pl__tick:nth-child(7) {
animation-delay: -0.5s;
}
.pl__tick:nth-child(8) {
animation-delay: -0.25s;
}

/* Animations */
@keyframes arrows {
from {
transform: rotate(45deg);
}
to {
transform: rotate(405deg);
}
}
@keyframes ringRotate {
from {
transform: rotate(0);
}
to {
transform: rotate(720deg);
}
}
@keyframes ringStroke {
from,
to {
stroke-dashoffset: 452;
transform: rotate(-45deg);
}
50% {
stroke-dashoffset: 169.5;
transform: rotate(-180deg);
}
}
@keyframes tick {
from,
3%,
47%,
to {
stroke-dashoffset: -12;
}
14%,
36% {
stroke-dashoffset: 0;
}
}
7 changes: 7 additions & 0 deletions include.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2263,6 +2263,13 @@ let cards = [
author: 'Shubham Kashyap',
githubLink: 'https://github.com/Shubhamkashyap1601'
},
{
artName: 'Compass Loader',
pageLink: './Art/AmanPathan/index.html',
imageLink: '.Art/AmanPathan/CompassLoader.gif',
author: 'AmanPathan',
githubLink: 'https://github.com/AmanPathan'
},
{
artName: 'Loading Animation in Page',
pageLink: './Art/Parth4git/index.html',
Expand Down

0 comments on commit d406098

Please sign in to comment.