HAML
.wrapper
.circle.small-wrap
.circle.small
.circle.small
.circle.small
.circle.small
.circle.small
.circle.small
.circle.circle-blue
.circle.circle-yellow
.circle.arc
.circle.line-wrap
.line
.line
.line
.line
.line
.line
.line
.line
.circle.circle-third
.circle.red-arc
.circle.red-ring
.circle.circle-red-center
.circle.circle-yellow-bg
.circle.circle-red
.circle.circle-yellow-center
.circle.green-arc
.circle.circle-fourth
.circle.blue-ring
.circle.red-ring2
.circle.yellow-bg2
.circle.green-center
.circle.yellow-center2
.circle.circle-yellow-fill
SCSS
$anim-dur: 3.2s;
$timing: linear;
$c1: #1565C0;
$c2: #B71C1C;
$c3: #FFEB3B;
$c4: #2E7D32;
$c5: #00BCD4;
$c6: #EF6C00;
$pos: -7.54em;
.circle {
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
body {
background: #000;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
margin: 0;
}
.wrapper {
width: 19em;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.circle {
border-radius: 100%;
position: absolute;
}
.circle-blue {
margin-left: calc(0em + #{$pos});
background: $c1;
width: 3em;
height: 3em;
animation: scale $anim-dur $timing infinite;
}
.circle-red {
background: $c2;
margin-left: calc(5em + #{$pos});
width: 3em;
height: 3em;
animation: circle-red-scale $anim-dur $timing infinite;
}
.circle-yellow {
margin-left: calc(0em + #{$pos});
width: 2em;
height: 2em;
border: 1em solid $c3;
animation: scale-out $anim-dur $timing infinite;
opacity: 0;
transform: scale(1, 1);
}
.circle-yellow-2 {
margin-left: calc(0em + #{$pos});
width: 2em;
height: 2em;
background: $c3;
opacity: 0;
animation: fade-in $anim-dur $timing infinite;
}
.circle-yellow-fill {
background: $c3;
margin-left: calc(5em + #{$pos});
width: 2em;
height: 2em;
opacity: 0;
animation: yellow-fill $anim-dur $timing infinite;
}
.circle-yellow-center {
background: $c3;
margin-left: calc(5em + #{$pos});
width: 0.9em;
height: 0.9em;
opacity: 0;
animation: yellow-center $anim-dur $timing infinite
}
.circle-yellow-bg {
background: $c3;
margin-left: calc(5em + #{$pos});
width: 1em;
height: 1em;
animation: yellow-bg $anim-dur $timing infinite
}
.small {
width: 0.38em;
height: 0.38em;
background: $c5;
position: absolute;
top: 50%;
left: 50%;
margin: -0.19em;
}
.small:first-child {
transform: rotate(180deg) translate(1.65em) rotate(-180deg)
}
.small:nth-child(2) {
width: 0.35em;
height: 0.35em;
transform: rotate(160deg) translate(1.65em) rotate(-160deg)
}
.small:nth-child(3) {
width: 0.32em;
height: 0.32em;
transform: rotate(140deg) translate(1.65em) rotate(-140deg)
}
.small:nth-child(4) {
width: 0.29em;
height: 0.29em;
transform: rotate(120deg) translate(1.65em) rotate(-120deg)
}
.small:nth-child(5) {
width: 0.26em;
height: 0.26em;
transform: rotate(100deg) translate(1.65em) rotate(-100deg)
}
.small:nth-child(6) {
width: 0.23em;
height: 0.23em;
transform: rotate(80deg) translate(1.65em) rotate(-80deg)
}
.arc {
margin-left: calc(0em + #{$pos});
width: 2em;
height: 2em;
border: 0.5em solid $c1;
border-right-color: transparent;
border-bottom-color: transparent;
animation: arc-rotate $anim-dur $timing infinite;
opacity: 0;
}
.small-wrap {
margin-left: calc(#{$pos} + #{$pos});
width: 4em;
height: 4em;
position: relative;
animation: rotate $anim-dur $timing infinite;
opacity: 0;
transform: rotate(180deg);
}
.line-wrap {
width: 4em;
height: 4em;
margin-left: calc(5em + #{$pos});
animation: line-wrap $anim-dur $timing infinite;
}
.line {
height: 0.6em;
width: 0.22em;
border-radius: 0.22em;
background: $c6;
position: absolute;
top: 50%;
left: 50%;
margin-top: -0.3em;
margin-left: -0.1em;
animation: lines $anim-dur $timing infinite;
}
.line:first-child {
transform: rotate(45deg) translate(0.4em) rotate(-90deg);
animation: line1 $anim-dur $timing infinite
}
.line:nth-child(2) {
transform: rotate(90deg) translate(0.4em) rotate(-90deg);
animation: line2 $anim-dur $timing infinite
}
.line:nth-child(3) {
transform: rotate(135deg) translate(0.4em) rotate(-90deg);
animation: line3 $anim-dur $timing infinite
}
.line:nth-child(4) {
transform: rotate(180deg) translate(0.4em) rotate(-90deg);
animation: line4 $anim-dur $timing infinite
}
.line:nth-child(5) {
transform: rotate(360deg) translate(0.4em) rotate(-90deg);
animation: line5 $anim-dur $timing infinite
}
.line:nth-child(6) {
transform: rotate(270deg) translate(0.4em) rotate(-90deg);
animation: line6 $anim-dur $timing infinite
}
.line:nth-child(7) {
transform: rotate(225deg) translate(0.4em) rotate(-90deg);
animation: line7 $anim-dur $timing infinite
}
.line:nth-child(8) {
transform: rotate(315deg) translate(0.4em) rotate(-90deg);
animation: line8 $anim-dur $timing infinite
}
.circle-third {
margin-left: calc(10em + #{$pos});
width: 3em;
height: 3em;
background: $c3;
animation: circle-third $anim-dur $timing infinite
}
.circle-green-center {
width: 3em;
height: 3em;
margin-left: calc(10em + #{$pos});
background: $c4;
transform: scale(0.3);
animation: green-center $anim-dur $timing infinite;
}
.circle-red-center {
width: 3em;
height: 3em;
margin-left: calc(10em + #{$pos});
background: $c2;
transform: scale(0.3);
animation: red-center $anim-dur $timing infinite;
}
.green-arc {
margin-left: calc(10em + #{$pos});
width: 1.3em;
height: 1.3em;
border: 0.5em solid $c4;
border-right-color: transparent;
border-bottom-color: transparent;
animation: green-arc $anim-dur $timing infinite;
opacity: 0;
}
.red-arc {
margin-left: calc(10em + #{$pos});
width: 2em;
height: 2em;
border: 0.3em solid $c2;
border-right-color: transparent;
border-bottom-color: transparent;
animation: red-arc $anim-dur $timing infinite;
opacity: 0;
}
.circle-fourth {
margin-left: calc(15em + #{$pos});
width: 3em;
height: 3em;
background: $c4;
animation: circle-fourth $anim-dur $timing infinite
}
.red-arc2 {
margin-left: calc(15em + #{$pos});
width: 3em;
height: 3em;
background: $c2;
animation: red-arc2 $anim-dur $timing infinite;
opacity: 0;
transform: scale(0.25)
}
.yellow-bg2 {
margin-left: calc(15em + #{$pos});
width: 1em;
height: 1em;
border: 1em solid $c3;
animation: yellow-bg2 $anim-dur $timing infinite;
transform: scale(0.3);
opacity: 0
}
.blue-ring {
margin-left: calc(15em + #{$pos});
width: 3em;
height: 3em;
background: $c1;
animation: blue-ring $anim-dur $timing infinite;
transform: scale(0.3);
}
.red-ring2 {
margin-left: calc(15em + #{$pos});
width: 3em;
height: 3em;
background: $c2;
animation: red-ring2 $anim-dur $timing infinite;
transform: scale(0.3);
}
.green-center {
margin-left: calc(15em + #{$pos});
width: 3em;
height: 3em;
background: $c4;
animation: green-center $anim-dur $timing infinite;
transform: scale(0);
}
.yellow-center2 {
margin-left: calc(15em + #{$pos});
width: 3em;
height: 3em;
background: $c3;
animation: yellow-center2 $anim-dur $timing infinite;
transform: scale(0);
}
@keyframes scale {
0% {
transform: scale(1,1)
}
5% {
transform: scale(1,1);
background: $c1
}
10% {
background: $c3;
}
15% {
transform: scale(0.4,0.4);
}
50% {
transform: scale(0.4,0.4);
background: $c3
}
55% {
background: $c1
}
65% {
transform: scale(0.8, 0.8);
}
80% {
transform: scale(0.8,0.8);
}
95% {
transform: scale(1,1)
}
100% {
transform: scale(1,1)
}
}
@keyframes scale-out {
0% {
transform: scale(1,1);
opacity: 0
}
2.5% {
opacity: 0
}
5% {
opacity: 1;
transform: scale(1,1)
}
15% {
transform: scale(0.4,0.4);
}
20% {
transform: scale(0,0)
}
95% {
opacity: 1;
transform: scale(0,0);
}
100% {
opacity: 1;
transform: scale(0,0);
}
}
@keyframes rotate {
60% {
opacity: 0;
transform: rotate(180deg)
}
65% {
opacity: 1;
}
75% {
opacity: 1;
}
80% {
opacity: 0;
transform: rotate(600deg);
}
95% {
opacity: 0;
transform: rotate(540deg);
}
100% {
opacity: 0;
transform: rotate(540deg);
}
}
@keyframes arc-rotate {
15% {
transform: rotate(0deg);
opacity: 0;
}
30% {
opacity: 1;
}
35% {
transform: rotate(360deg)
}
45% {
opacity: 1;
}
55% {
transform: rotate(720deg);
opacity: 0;
}
95% {
transform: rotate(720deg);
opacity: 0;
}
100% {
transform: rotate(720deg);
opacity: 0;
}
}
@keyframes yellow-fill {
14% {
opacity: 0;
}
15% {
opacity: 1;
width: 0.5em;
height: 0.5em;
border-radius: 0.5em;
}
25% {
width: 3em;
height: 3em;
border-radius: 3em;
}
26% {
width: 3em;
height: 3em;
border-radius: 3em;
transform: translateX(0em);
}
35% {
width: 8em;
border-radius: 8em;
transform: translateX(2.5em);
}
45% {
width: 3em;
border-radius: 3em;
height: 3em;
transform: translateX(5em);
}
55% {
width: 0.85em;
height: 0.85em;
border-radius: 0.85em;
opacity: 1;
transform: translateX(5em);
}
62% {
transform: translate(6.2em, 1.3em) rotate(0deg);
transform-origin: 1.75em;
}
74% {
transform: translate(6.2em, 1.3em) rotate(180deg);
}
81% {
transform: translate(7.4em, 0em) rotate(180deg);
}
85% {
background: $c3;
}
100% {
background: $c4;
width: 0.9em;
height: 0.9em;
border-radius: 0.9em;
opacity: 1;
transform-origin: 1.75em;
transform: translate(7.4em, 0em) rotate(180deg);
}
}
@keyframes circle-red-scale {
0% {
border: 0em solid $c2;
}
5% {
transform: scale(0.6, 0.6);
background: $c2;
}
10% {
width: 0;
height: 0;
border: 1em solid $c2;
}
20% {
background: transparent;
width: 3em;
height: 3em;
}
35% {
background: $c2;
width: 3em;
height: 3em;
border: 1em solid $c2;
}
50% {
width: 1em;
height: 1em;
border: 0.5em solid $c2;
}
80% {
width: 1em;
height: 1em;
border: 0.5em solid $c2;
transform: scale(0.6, 0.6);
}
95% {
background: $c2;
width: 3em;
height: 3em;
border: 0em solid $c2;
transform: scale(1, 1);
}
100% {
background: $c2;
width: 3em;
height: 3em;
border: 0em solid $c2;
transform: scale(1, 1);
}
}
@keyframes yellow-center {
25% {
opacity: 0
}
35% {
opacity: 1
}
85% {
opacity: 1
}
90% {
opacity: 0
}
100% {
opacity: 0
}
}
@keyframes yellow-bg {
45% {
transform: scale(1,1)
}
55% {
transform: scale(1.8,1.8)
}
80% {
transform: scale(1.8,1.8)
}
90% {
transform: scale(1,1)
}
100% {
transform: scale(1,1)
}
}
@keyframes line-wrap {
55% {
transform: rotate(0deg)
}
80% {
transform: rotate(-45deg)
}
100% {
transform: rotate(-45deg)
}
}
@keyframes line1 {
0% {
opacity: 0
}
44% {
opacity: 0
}
45% {
opacity: 1;
transform: rotate(45deg) translate(0.4em) rotate(-90deg)
}
55% {
transform: rotate(45deg) translate(1.35em) rotate(-90deg)
}
60% {
height: 0.6em;
margin-top: -0.3em;
}
70% {
height: 0.2em;
margin-top: -0.1em;
}
80% {
height: 0.2em;
margin-top: -0.1em;
transform: rotate(45deg) translate(1.35em) rotate(-90deg)
}
85% {
height: 0.6em;
margin-top: -0.3em;
}
90% {
transform: rotate(45deg) translate(0.2em) rotate(-90deg)
}
100% {
transform: rotate(45deg) translate(0.2em) rotate(-90deg)
}
}
@keyframes line2 {
0% {
opacity: 0
}
44% {
opacity: 0
}
45% {
opacity: 1;
transform: rotate(90deg) translate(0.4em) rotate(-90deg)
}
55% {
transform: rotate(90deg) translate(1.35em) rotate(-90deg)
}
60% {
height: 0.6em;
margin-top: -0.3em;
}
70% {
height: 0.2em;
margin-top: -0.1em;
}
80% {
height: 0.2em;
margin-top: -0.1em;
transform: rotate(90deg) translate(1.35em) rotate(-90deg)
}
85% {
height: 0.6em;
margin-top: -0.3em;
}
90% {
transform: rotate(90deg) translate(0.2em) rotate(-90deg)
}
100% {
transform: rotate(90deg) translate(0.2em) rotate(-90deg)
}
}
@keyframes line3 {
0% {
opacity: 0
}
44% {
opacity: 0
}
45% {
opacity: 1;
transform: rotate(135deg) translate(0.4em) rotate(-90deg)
}
55% {
transform: rotate(135deg) translate(1.35em) rotate(-90deg)
}
60% {
height: 0.6em;
margin-top: -0.3em;
}
70% {
height: 0.2em;
margin-top: -0.1em;
}
80% {
height: 0.2em;
margin-top: -0.1em;
transform: rotate(135deg) translate(1.35em) rotate(-90deg)
}
85% {
height: 0.6em;
margin-top: -0.3em;
}
90% {
transform: rotate(135deg) translate(0.2em) rotate(-90deg)
}
100% {
transform: rotate(135deg) translate(0.2em) rotate(-90deg)
}
}
@keyframes line4 {
0% {
opacity: 0
}
44% {
opacity: 0
}
45% {
opacity: 1;
transform: rotate(180deg) translate(0.4em) rotate(-90deg)
}
55% {
transform: rotate(180deg) translate(1.35em) rotate(-90deg)
}
60% {
height: 0.6em;
margin-top: -0.3em;
}
70% {
height: 0.2em;
margin-top: -0.1em;
}
80% {
height: 0.2em;
margin-top: -0.1em;
transform: rotate(180deg) translate(1.35em) rotate(-90deg)
}
85% {
height: 0.6em;
margin-top: -0.3em;
}
90% {
transform: rotate(180deg) translate(0.2em) rotate(-90deg)
}
100% {
transform: rotate(180deg) translate(0.2em) rotate(-90deg)
}
}
@keyframes line5 {
0% {
opacity: 0
}
44% {
opacity: 0
}
45% {
opacity: 1;
transform: rotate(360deg) translate(0.4em) rotate(-90deg)
}
55% {
transform: rotate(360deg) translate(1.35em) rotate(-90deg)
}
60% {
height: 0.6em;
margin-top: -0.3em;
}
70% {
height: 0.2em;
margin-top: -0.1em;
}
80% {
height: 0.2em;
margin-top: -0.1em;
transform: rotate(360deg) translate(1.35em) rotate(-90deg)
}
85% {
height: 0.6em;
margin-top: -0.3em;
}
90% {
transform: rotate(360deg) translate(0.2em) rotate(-90deg)
}
100% {
transform: rotate(360deg) translate(0.2em) rotate(-90deg)
}
}
@keyframes line6 {
0% {
opacity: 0
}
44% {
opacity: 0
}
45% {
opacity: 1;
transform: rotate(270deg) translate(0.4em) rotate(-90deg)
}
55% {
transform: rotate(270deg) translate(1.35em) rotate(-90deg)
}
60% {
height: 0.6em;
margin-top: -0.3em;
}
70% {
height: 0.2em;
margin-top: -0.1em;
}
80% {
height: 0.2em;
margin-top: -0.1em;
transform: rotate(270deg) translate(1.35em) rotate(-90deg)
}
85% {
height: 0.6em;
margin-top: -0.3em;
}
90% {
transform: rotate(270deg) translate(0.2em) rotate(-90deg)
}
100% {
transform: rotate(270deg) translate(0.2em) rotate(-90deg)
}
}
@keyframes line7 {
0% {
opacity: 0
}
44% {
opacity: 0
}
45% {
opacity: 1;
transform: rotate(225deg) translate(0.4em) rotate(-90deg)
}
55% {
transform: rotate(225deg) translate(1.35em) rotate(-90deg)
}
60% {
height: 0.6em;
margin-top: -0.3em;
}
70% {
height: 0.2em;
margin-top: -0.1em;
}
80% {
height: 0.2em;
margin-top: -0.1em;
transform: rotate(225deg) translate(1.35em) rotate(-90deg)
}
85% {
height: 0.6em;
margin-top: -0.3em;
}
90% {
transform: rotate(225deg) translate(0.2em) rotate(-90deg)
}
100% {
transform: rotate(225deg) translate(0.2em) rotate(-90deg)
}
}
@keyframes line8 {
0% {
opacity: 0
}
44% {
opacity: 0
}
45% {
opacity: 1;
transform: rotate(315deg) translate(0.4em) rotate(-90deg)
}
55% {
transform: rotate(315deg) translate(1.35em) rotate(-90deg)
}
60% {
height: 0.6em;
margin-top: -0.3em;
}
70% {
height: 0.2em;
margin-top: -0.1em;
}
80% {
height: 0.2em;
margin-top: -0.1em;
transform: rotate(315deg) translate(1.35em) rotate(-90deg)
}
85% {
height: 0.6em;
margin-top: -0.3em;
}
90% {
transform: rotate(315deg) translate(0.2em) rotate(-90deg)
}
100% {
transform: rotate(315deg) translate(0.2em) rotate(-90deg)
}
}
@keyframes circle-third {
0% {
border: 0em solid $c3;
}
5% {
transform: scale(0.6, 0.6);
background: $c3;
}
10% {
width: 0;
height: 0;
border: 1em solid $c3;
}
20% {
background: transparent;
width: 2.2em;
height: 2.2em;
border: 1em solid $c4;
}
20% {
opacity: 1
}
35% {
opacity: 0
}
100% {
transform: scale(0.6, 0.6);
background: transparent;
width: 2.2em;
height: 2.2em;
border: 0;
}
}
@keyframes red-center {
0% {
border: 0em solid $c2;
opacity: 0
}
14% {
opacity: 0;
}
15% {
opacity: 1;
transform: scale(0.2);
border: 0em solid $c2;
background: $c2;
}
30% {
background: transparent;
transform: scale(0.4);
border: 2.2em solid $c2
}
44% {
background: transparent;
transform: scale(0.4);
border: 2.2em solid $c2;
opacity: 1;
}
45% {
background: $c4;
transform: scale(0.4);
border: 0em solid $c2;
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 1;
}
85% {
transform: scale(0.4);
background: $c4
}
100% {
opacity: 1;
border: 0;
transform: scale(1);
background: $c3;
}
}
@keyframes green-arc {
25% {
transform: rotate(0deg);
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
55% {
width: 1.3em;
height: 1.3em;
}
70% {
width: 0.2em;
height: 0.2em;
opacity: 1;
}
75% {
opacity: 0;
}
90% {
transform: rotate(-720deg);
}
100% {
width: 0.2em;
height: 0.2em;
transform: rotate(-720deg);
opacity: 0;
}
}
@keyframes red-arc {
45% {
transform: rotate(0deg)
}
60% {
opacity: 0;
}
65% {
opacity: 1;
}
75% {
border-bottom-color: transparent;
border-right-color: transparent;
}
80% {
width: 2em;
height: 2em;
transform: rotate(600deg);
border-bottom-color: $c2;
border-right-color: $c2;
}
90% {
width: 1em;
height: 1em;
}
100% {
width: 1em;
height: 1em;
opacity: 1;
transform: rotate(600deg);
border-bottom-color: $c2;
border-right-color: $c2;
}
}
@keyframes circle-fourth {
10% {
width: 3em;
height: 3em;
background: $c4;
border: 0em solid $c4;
transform: scale(1)
}
15% {
background: $c4;
}
20% {
background: transparent;
width: 1em;
height: 1em;
border: 1em solid $c4;
transform: scale(1)
}
30% {
transform: scale(0.3);
opacity: 1;
background: transparent;
width: 1em;
height: 1em;
border: 1em solid $c4;
}
31% {
opacity: 0;
background: $c4;
width: 3em;
height: 3em;
border: 0em solid $c4;
transform: scale(0);
}
100% {
background: $c4;
width: 3em;
height: 3em;
border: 0em solid $c4;
transform: scale(0);
opacity: 0
}
}
@keyframes red-arc2 {
15% {
opacity: 0;
transform: scale(0.25)
}
20% {
opacity: 1;
width: 3em;
height: 3em;
background: $c2;
border: 0em solid $c2
}
30% {
opacity: 1;
transform: scale(0.8) rotate(0deg);
width: 1.2em;
height: 1.2em;
border: 0.8em solid $c2;
background: transparent;
border-bottom-color: $c2;
border-right-color: $c2;
}
35% {
border-bottom-color: transparent;
}
55% {
opacity: 1
}
60% {
opacity: 0
}
65% {
transform: scale(0.5) rotate(600deg)
}
100% {
opacity: 0;
transform: scale(0.5) rotate(600deg);
width: 1.2em;
height: 1.2em;
border: 0.8em solid $c2;
background: transparent;
border-bottom-color: transparent;
}
}
@keyframes yellow-bg2 {
40% {
opacity: 0;
transform: scale(0.3)
}
55% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
57% {
border-bottom-color: $c3;
border-right-color: $c3;
width: 1em;
height: 1em;
border: 1em solid $c3
}
62% {
width: 1.5em;
height: 1.5em;
border: 0.5em solid $c3;
border-bottom-color: transparent;
border-right-color: transparent;
}
65% {
transform: scale(1) rotate(120deg);
}
75% {
transform: scale(1) rotate(240deg);
opacity: 1;
}
85% {
opacity: 1
}
86% {
opacity: 0
}
95% {
transform: scale(1) rotate(480deg);
}
100% {
opacity: 0;
width: 1.5em;
height: 1.5em;
border: 0.5em solid $c3;
transform: scale(1) rotate(480deg);
border-bottom-color: transparent;
border-right-color: transparent;
}
}
@keyframes blue-ring {
0% {
transform: scale(0)
}
20% {
transform: scale(0);
width: 3em;
height: 3em;
background: $c1;
border: 0em solid $c1;
}
35% {
width: 1em;
height: 1em;
background: transparent;
border: 1em solid $c1;
transform: scale(1)
}
55% {
opacity: 1;
transform: scale(1) rotate(10deg);
}
57% {
border-bottom-color: $c1;
border-right-color: $c1;
width: 1em;
height: 1em;
border: 1em solid $c1
}
62% {
width: 1.5em;
height: 1.5em;
border: 0.5em solid $c1;
border-bottom-color: transparent;
border-right-color: transparent;
}
75% {
transform: scale(1) rotate(220deg);
opacity: 1
}
85% {
opacity: 1
}
86% {
opacity: 0
}
95% {
transform: scale(1) rotate(460deg);
}
100% {
opacity: 0;
width: 1.5em;
height: 1.5em;
border: 0.5em solid $c1;
background: transparent;
transform: scale(1) rotate(460deg);
border-bottom-color: transparent;
border-right-color: transparent;
}
}
@keyframes red-ring2 {
0% {
transform: scale(0)
}
30% {
transform: scale(0);
width: 3em;
height: 3em;
background: $c2;
border: 0em solid $c2;
}
45% {
width: 1em;
height: 1em;
background: transparent;
border: 1em solid $c2;
transform: scale(1)
}
54% {
opacity: 1
}
55% {
opacity: 0
}
100% {
width: 1em;
height: 1em;
background: transparent;
border: 1em solid $c2;
transform: scale(1);
opacity: 0
}
}
@keyframes green-center {
55% {
transform: scale(0)
}
75% {
transform: scale(0.5);
width: 3em;
height: 3em;
border: 0em solid $c4;
background: $c4;
}
85% {
transform: scale(1);
width: 1em;
height: 1em;
border: 1em solid $c4;
background: transparent;
}
86% {
transform: scale(1)
}
90% {
transform: scale(0.3);
}
100% {
transform: scale(0.3);
width: 1em;
height: 1em;
border: 1em solid $c4;
background: transparent;
}
}
@keyframes yellow-center2 {
81% {
transform: scale(0)
}
85% {
transform: scale(0.3);
background: $c3;
}
100% {
transform: scale(1);
background: $c4;
}
}
@media screen and (min-width: 20em) {
body {
font-size: 80%
}
}
@media screen and (min-width: 40em) {
body {
font-size: 100%
}
}
@media screen and (min-width: 60em) {
body {
font-size: 110%
}
}
@media screen and (min-width: 70em) {
body {
font-size: 120%
}
}
@media screen and (min-width: 80em) {
body {
font-size: 130%
}
}
@media screen and (min-width: 90em) {
body {
font-size: 140%
}
}
@media screen and (min-width: 100em) {
body {
font-size: 150%
}
}
@media screen and (min-width: 110em) {
body {
font-size: 160%
}
}
@media screen and (min-width: 120em) {
body {
font-size: 170%
}
}
@media screen and (min-width: 130em) {
body {
font-size: 180%
}
}
@media screen and (min-width: 140em) {
body {
font-size: 190%
}
}
@media screen and (min-width: 150em) {
body {
font-size: 200%
}
}
@media screen and (min-width: 160em) {
body {
font-size: 210%
}
}
@media screen and (min-width: 170em) {
body {
font-size: 225%
}
}
@media screen and (min-width: 180em) {
body {
font-size: 240%
}
}
@media screen and (min-width: 190em) {
body {
font-size: 255%
}
}
@media screen and (min-width: 200em) {
body {
font-size: 270%
}
}
@media screen and (min-width: 225em) {
body {
font-size: 285%
}
}
@media screen and (min-width: 250em) {
body {
font-size: 300%
}
}
