Skip to content

Instantly share code, notes, and snippets.

@mytharcher
Created August 10, 2016 13:18
Show Gist options
  • Save mytharcher/df519da5ed0c2895a87c2d1420c30405 to your computer and use it in GitHub Desktop.
Save mytharcher/df519da5ed0c2895a87c2d1420c30405 to your computer and use it in GitHub Desktop.
overwatch loading by css3 BY CCG
<div class="loader">
<ul class="hexagon-container">
<li class="hexagon hex_1"></li>
<li class="hexagon hex_2"></li>
<li class="hexagon hex_3"></li>
<li class="hexagon hex_4"></li>
<li class="hexagon hex_5"></li>
<li class="hexagon hex_6"></li>
<li class="hexagon hex_7"></li>
</ul>
</div>
.loader{
position: fixed;
top: 50%;
left: 50%;
width: 160px;
height: 160px;
margin: -80px 0px 0px -80px;
background-color: transparent;
border-radius: 50%;
border: 2px solid #E3E4DC;
// animation: rotate3 3s linear infinite;
&:before {
content: '';
width: 164px;
height: 164px;
display: block;
position: absolute;
border: 2px solid #898a86;
border-radius: 50%;
top: -2px;
left: -2px;
box-sizing: border-box;
// border-bottom-color: transparent;
// border-left-color: transparent;
// border-right-color: transparent;
clip: rect(0px, 35px, 35px, 0px);
z-index: 10;
animation: rotate infinite;
animation-duration: 3s;
animation-timing-function: linear;
}
&:after {
content: '';
width: 164px;
height: 164px;
display: block;
position: absolute;
border: 2px solid #c1bebb;
border-radius: 50%;
top: -2px;
left: -2px;
box-sizing: border-box;
// transform: rotate(30deg);
// border-bottom-color: transparent;
// border-left-color: transparent;
// border-right-color: transparent;
clip: rect(0px, 164px, 150px, 0px);
z-index: 9;
// animation: rotate2 infinite, rotate3 infinite;
// animation-duration: 3s;
// animation-timing-function: linner;
animation: rotate2 3s linear infinite;
}
}
.hexagon-container{
position: relative;
top: 33px;
left: 41px;
border-radius: 50%;
}
.hexagon{
position: absolute;
width: 40px;
height: 23px;
background-color: #556C82;
&:before{
content: "";
position: absolute;
top: -11px;
left: 0;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 11.5px solid #556C82;
}
&:after{
content: "";
position: absolute;
top: 23px;
left: 0;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 11.5px solid #556C82;
}
}
@each $index, $top, $left in (1, 0px, 0px),
(2, 0px, 42px),
(3, 36px, 63px),
(4, 72px, 42px),
(5, 72px, 0px),
(6, 36px, -21px),
(7, 36px, 21px){
$time: 3s; // thx to @zeakd for this formula
$delay: $time / 14;
.hexagon.hex_#{$index} {
top: $top;
left: $left;
//cubic-bezier(.155,1.105,.295,1.12)
animation: Animasearch $time ease-in-out infinite;
animation-delay: $delay*$index;
}
}
@keyframes Animasearch{
0% {
transform: scale(1);
opacity: 1;
}
15%, 50% {
transform: scale(0.5);
opacity: 0;
}
65% {
transform: scale(1);
opacity: 1;
}
}
@keyframes rotate{
0% {
transform: rotate(0);
clip: rect(0px, 35px, 35px, 0px);
}
50% {
clip: rect(0px, 40px, 40px, 0px);
}
100% {
transform: rotate(360deg);
clip: rect(0px, 35px, 35px, 0px);
}
}
@keyframes rotate2{
0% {
transform: rotate(0deg);
clip: rect(0px, 164px, 150px, 0px);
}
50%{
clip: rect(0px, 164px, 0px, 0px);
transform: rotate(360deg);
}
100% {
transform: rotate(720deg);
clip: rect(0px, 164px, 150px, 0px);
}
}
@keyframes rotate3{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment