Skip to content

Implement hexagon spinner (new structure) #144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Implement hexagon spinner (new structure) #144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,18 @@ Given that you have included `spinkit.min.css` in your project, these snippets w
</div>
```

### Hexagon

```html
<div class="sk-hexagon">
<div class="sk-hex-parent">
Copy link
Owner

@tobiasahlin tobiasahlin Oct 29, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we get rid of this sk-hex-parent element? It's only used for positioning that could be applied directly to the children, right?

<div class="sk-hex-child"></div>
<div class="sk-hex-child"></div>
<div class="sk-hex-child"></div>
</div>
</div>
```

## Web browser compatibility

SpinKit uses CSS animations and variables:
Expand Down
10 changes: 10 additions & 0 deletions examples.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,5 +129,15 @@
</div>
</div>

<div class="example">
<div class="sk-hexagon">
<div class="sk-hex-parent">
<div class="sk-hex-child"></div>
<div class="sk-hex-child"></div>
<div class="sk-hex-child"></div>
</div>
</div>
</div>

</body>
</html>
97 changes: 97 additions & 0 deletions spinkit.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
:root {
--sk-size: 40px;
--sk-color: #333;
--sk-hex-scale: (0.0096153846153846 * var(--sk-size));
Copy link
Owner

@tobiasahlin tobiasahlin Oct 29, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where does this number come from? Why is it so exact? Can we get rid of if (if we get rid of the parent element)?

}


Expand Down Expand Up @@ -572,4 +573,100 @@
} 100% {
transform: rotate(-360deg);
}
}

/* Hexagon

<div class="sk-hexagon">
<div class="sk-hex-parent">
<div class="sk-hex-child"></div>
<div class="sk-hex-child"></div>
<div class="sk-hex-child"></div>
</div>
</div>
*/
.sk-hexagon {
height: var(--sk-size);
overflow: hidden;
position: relative;
width: var(--sk-size);
}

.sk-hex-parent {
left: calc(27 * var(--sk-hex-scale));
position: relative;
top: calc(16 * var(--sk-hex-scale));
}

.sk-hex-child {
animation: sk-hexagonAnimation 2s infinite cubic-bezier(.19, 1.6, .4, 1);
background-color: var(--sk-color);
display: block;
Copy link
Owner

@tobiasahlin tobiasahlin Oct 29, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need display: block when position is set to absolute 👀

height: calc(26 * var(--sk-hex-scale));
opacity: 0;
position: absolute;
transform: scale(0);
transform-origin: center center;
width: calc(48 * var(--sk-hex-scale));
}

.sk-hex-child::before,
.sk-hex-child::after {
border-left: calc(24 * var(--sk-hex-scale)) solid transparent;
border-right: calc(24 * var(--sk-hex-scale)) solid transparent;
content: "";
height: 0;
position: absolute;
width: 0;
}

.sk-hex-child::before {
border-bottom: calc(13 * var(--sk-hex-scale)) solid var(--sk-color);
top: calc(-13 * var(--sk-hex-scale));
}

.sk-hex-child::after {
border-top: calc(13 * var(--sk-hex-scale)) solid var(--sk-color);
bottom: calc(-13 * var(--sk-hex-scale));
}

.sk-hex-child:nth-child(2),
.sk-hex-child:nth-child(3) {
top: calc(45 * var(--sk-hex-scale));
Copy link
Owner

@tobiasahlin tobiasahlin Oct 29, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a lot of calc usage in general here to position the three hexagons—could we just use %? They're just being centered horizontally or attached to a corner, right?

}

.sk-hex-child:nth-child(1) {
animation-delay: .1s;
}

.sk-hex-child:nth-child(2) {
animation-delay: 0s;
left: calc(-27 * var(--sk-hex-scale));
}

.sk-hex-child:nth-child(3) {
animation-delay: .2s;
left: calc(27 * var(--sk-hex-scale));
}

@keyframes sk-hexagonAnimation {
0% {
opacity: 0;
transform: scale(0) translateZ(0);
}

40% {
opacity: 1;
transform: scale(1) translateZ(0);
}

60% {
opacity: 1;
transform: scale(1) translateZ(0);
}

100% {
opacity: 0;
transform: scale(0) translateZ(0);
}
Copy link
Owner

@tobiasahlin tobiasahlin Oct 29, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All keyframes that share all properties (like 100% and 0% can be defined on the same row 🙏

}
Loading