An experimental loader for my website that I'll never use. I didn't care about cross-browser compatibility so if you want to use it you'll have to change some properties.
Forked from Valentin François on CodePen.
An experimental loader for my website that I'll never use. I didn't care about cross-browser compatibility so if you want to use it you'll have to change some properties.
Forked from Valentin François on CodePen.
<div id="circleContainer"> | |
<div class="circle0 delay0"></div> | |
<div class="circle0 delay1"></div> | |
<div class="circle0 delay2"></div> | |
<div class="circle1 delay3"></div> | |
<div class="circle1 delay4"></div> | |
<div class="circle1 delay5"></div> | |
<div class="circle2 delay6"></div> | |
<div class="circle2 delay7"></div> | |
<div class="circle2 delay8"></div> | |
</div> | |
<svg width="100" height="100" id="logo" xmlns="http://www.w3.org/2000/svg"> | |
<path data-name="V" d="M99.302,23.0173a.7193.7193,0,0,0-.7193-.7193.7056.7056,0,0,0-.31.0766c-.103.0507-1.8937.883-5.0244,2.0355a80.72,80.72,0,0,1-13.8193,3.8227,42.81,42.81,0,0,1-11.4167.5587c-.0046-.3865,0-.7729,0-1.1594.0093-.9033.014-1.8345-.0745-2.8682L67.71,23.3951c-.5727-3.5339-1.2245-7.5382-4.5443-10.6578a5.4779,5.4779,0,0,0-3.6876-1.3317,6.1073,6.1073,0,0,0-3.8552,1.3177,9.1432,9.1432,0,0,0-3.5014,6.03c-.8148,4.8237,2.9426,8.8093,6.7792,10.4716a25.2379,25.2379,0,0,0,5.2428,1.5877c.0046.41.0093.8148.014,1.2245.0045.3487.0087.7005.011,1.0533-.3615,5.3393-.882,10.3409-1.5257,14.9865-.4935,3.1113-1.0243,5.9606-1.5072,8.414-.942,4.7233-1.8657,8.7814-2.6335,11.9527-4.96,17.488-11.5642,24.25-14.6918,16.9709-4.116-12.3526-6.4068-32.709-8.0085-50.2067C33.86,14.05,14.0839,22.1781,14.0839,22.1781c8.8856,22.053,2.7442,60.6381,15.4413,73.9033,14.0865,14.7531,33.44,3.2545,37.9327-50.7673.2941-2.7312.5379-5.6213.6849-8.6118.0674-1.0012.0554-2.0352.0213-3.0631.0318-.8051.06-1.62.0858-2.4412a45.8991,45.8991,0,0,0,11.5611-.9631A82.441,82.441,0,0,0,93.8258,25.9c3.2453-1.313,5.0239-2.2117,5.0984-2.2489l-.0047-.01A.7113.7113,0,0,0,99.302,23.0173Zm-39.2654,3.8c-2.9473-1.4247-5.62-4.3162-4.9354-7.636.2514-2.2769,2.3885-4.5071,4.3069-4.5071a2.2459,2.2459,0,0,1,1.5784.6425c2.1977,2.044,2.8216,6.1693,3.2313,9.8337.0373.7682.0093,1.5179-.0186,2.2722-.014.2794-.0233.5587-.0326.8428A22.1748,22.1748,0,0,1,60.0366,26.8173Z" transform="translate(-14.0839 -11.4057)"/> | |
</svg> |
html, body, #circleContainer { | |
width:100%; | |
height:100%; | |
margin:0; | |
} | |
body{ | |
background-color:#fff; | |
overflow:hidden; | |
animation:blinkBG 3s infinite; | |
} | |
.circle0, .circle1, .circle2 { | |
opacity:0; | |
height:160px; | |
width:160px; | |
transform:rotate(45deg); | |
box-sizing:border-box; | |
position:absolute; | |
z-index:3; | |
left:calc(50% - 80px); | |
top:calc(50% - 80px); | |
} | |
.circle1 { | |
border: 2px solid #63a1f4; | |
animation : enlarge1 4.5s infinite, blink 3s infinite; | |
} | |
.circle2 { | |
border: 1px solid #63a1f4; | |
animation : enlarge2 4.5s infinite, blink 3s infinite; | |
} | |
.circle0 { | |
border: 3px solid #63a1f4; | |
animation : enlarge0 4.5s infinite, blink 3s infinite; | |
} | |
.delay0 { | |
animation-delay:0s,0s; | |
} | |
.delay1 { | |
animation-delay:1.5s,0s; | |
} | |
.delay2 { | |
animation-delay:3s,0s; | |
} | |
.delay3 { | |
animation-delay:0.05s,0s; | |
} | |
.delay4 { | |
animation-delay:1.55s,0s; | |
} | |
.delay5 { | |
animation-delay:3.05s,0s; | |
} | |
.delay6 { | |
animation-delay:0.1s,0s; | |
} | |
.delay7 { | |
animation-delay:1.6s,0s; | |
} | |
.delay8 { | |
animation-delay:3.1s,0s; | |
} | |
#logo{ | |
position:absolute; | |
opacity:1; | |
left:calc(50% - 35px); | |
top:calc(50% - 42px); | |
animation : blinkSVG 3s infinite; | |
} | |
@keyframes enlarge0{ | |
0% { | |
opacity:0; | |
height:110px; | |
width:110px; | |
left:calc(50% - 55px); | |
top:calc(50% - 55px); | |
} | |
20% { | |
opacity:1; | |
height:180px; | |
width:180px; | |
left:calc(50% - 90px); | |
top:calc(50% - 90px); | |
} | |
38% { | |
opacity:0; | |
} | |
100% { | |
opacity:0; | |
height:4200px; | |
width:4200px; | |
left:calc(50% - 2100px); | |
top:calc(50% - 2100px); | |
} | |
} | |
@keyframes enlarge1{ | |
0% { | |
opacity:0; | |
height:110px; | |
width:110px; | |
left:calc(50% - 55px); | |
top:calc(50% - 55px); | |
} | |
20% { | |
opacity:1; | |
height:160px; | |
width:160px; | |
left:calc(50% - 80px); | |
top:calc(50% - 80px); | |
} | |
38% { | |
opacity:0; | |
} | |
100% { | |
opacity:0; | |
height:3000px; | |
width:3000px; | |
left:calc(50% - 1500px); | |
top:calc(50% - 1500px); | |
} | |
} | |
@keyframes enlarge2{ | |
0% { | |
opacity:0; | |
height:110px; | |
width:110px; | |
left:calc(50% - 55px); | |
top:calc(50% - 55px); | |
} | |
20% { | |
opacity:1; | |
height:140px; | |
width:140px; | |
left:calc(50% - 70px); | |
top:calc(50% - 70px); | |
} | |
38% { | |
opacity:0; | |
} | |
100% { | |
height:1800px; | |
width:1800px; | |
left:calc(50% - 900px); | |
top:calc(50% - 900px); | |
} | |
} | |
@keyframes blink{ | |
0%{ | |
border-color:#63a1f4; | |
border-radius:0; | |
} | |
40%{ | |
border-color:#63a1f4; | |
border-radius:0; | |
} | |
50%{ | |
border-color:#fff; | |
border-radius:50%; | |
} | |
90% { | |
border-color:#fff; | |
border-radius:50%; | |
} | |
100%{ | |
border-color:#63a1f4; | |
border-radius:0; | |
} | |
} | |
@keyframes blinkBG{ | |
0%{ | |
background-color:#fff; | |
} | |
40%{ | |
background-color:#fff; | |
} | |
50%{ | |
background-color:#63a1f4; | |
} | |
90% { | |
background-color:#63a1f4; | |
} | |
100%{ | |
background-color:#fff; | |
} | |
} | |
@keyframes blinkSVG{ | |
0%{ | |
fill:#63a1f4; | |
} | |
40%{ | |
fill:#63a1f4; | |
} | |
50%{ | |
fill:#fff; | |
} | |
90% { | |
fill:#fff; | |
} | |
100%{ | |
fill:#63a1f4; | |
} | |
} |