Animated Logo Preloader for Website
Make your own logo animated and use it as a preloader in your website using HTML and CSS and SVG only.
The code is very simple and used the latest css properties and css advanced selectors too.
Credit: The idea is inspired by a logo design from freepik.com.
Watch Video Tutorial
https://youtu.be/SxHjTMKPcWE
Live Preview.!
o
r
g
a
n
i
c
f
a
r
m
HTML Code
<div class="preloader">
<div class="logo">
<div class="logo-top">
<div class="sun">
<!-- Create 19 span with class -->
<span class="sun-ray"></span>
<span class="sun-ray"></span>
<span class="sun-ray"></span>
<span class="sun-ray"></span>
<span class="sun-ray"></span>
<span class="sun-ray"></span>
<span class="sun-ray"></span>
<span class="sun-ray"></span>
<span class="sun-ray"></span>
<span class="sun-ray"></span>
<span class="sun-ray"></span>
<span class="sun-ray"></span>
<span class="sun-ray"></span>
<span class="sun-ray"></span>
<span class="sun-ray"></span>
<span class="sun-ray"></span>
<span class="sun-ray"></span>
<span class="sun-ray"></span>
<span class="sun-ray"></span>
</div>
<div class="text">
<!-- create span as per text length in my case i will create 11 span -->
<span style="text-transform: uppercase;">o</span>
<span>r</span>
<span>g</span>
<span>a</span>
<span>n</span>
<span>i</span>
<span>c</span>
<span style="text-transform: uppercase;">f</span>
<span>a</span>
<span>r</span>
<span>m</span>
</div>
</div>
<div class="logo-bottom">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 473.4 192.39">
<path class="cls-1" d="M463.52,0c38.15,19.64-33.95,131.14-220.25,143.64C148.31,150,17.52,141,0,192.39-.53,134.2,116.27,120.45,235.66,115,432.24,106,482.92,13.36,463.52,0Z"/>
</svg>
</div>
</div>
</div>
CSS Code
/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Yesteryear&display=swap');
/* Variables */
:root{
--sunColor: #FFB703;
--textColor: #023047;
--shadowColor: #219EBC;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Yesteryear', cursive;
}
body{
width: 100%;
height: 100vh;
display: grid;
place-items: center;
}
.preloader{
width: 500px;
}
.logo{
text-align: center;
}
.logo-top{
height: 40px;
}
.logo-top .sun{
--size: 60px;
width: calc(var(--size) * 2);
height: var(--size);
margin-inline: auto;
background-color: var(--sunColor);
border-top-left-radius: var(--size);
border-top-right-radius: var(--size);
position: relative;
animation: sunAnimation 1s ease forwards, sunAnimation2 1s ease 0.5s forwards;
}
.logo-top .sun-ray{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 115px solid var(--sunColor);
position: absolute;
top: -100%;
left: 50%;
transform: rotate(0deg);
transform-origin: bottom;
opacity: 0;
}
.logo-top .sun-ray:nth-child(1){
transform: rotate(-90deg);
animation: sunRayAnimation 0s ease 0.50s forwards;
}
.logo-top .sun-ray:nth-child(2){
transform: rotate(-80deg);
animation: sunRayAnimation 0s ease 0.55s forwards;
}
.logo-top .sun-ray:nth-child(3){
transform: rotate(-70deg);
animation: sunRayAnimation 0s ease 0.60s forwards;
}
.logo-top .sun-ray:nth-child(4){
transform: rotate(-60deg);
animation: sunRayAnimation 0s ease 0.65s forwards;
}
.logo-top .sun-ray:nth-child(5){
transform: rotate(-50deg);
animation: sunRayAnimation 0s ease 0.70s forwards;
}
.logo-top .sun-ray:nth-child(6){
transform: rotate(-40deg);
animation: sunRayAnimation 0s ease 0.75s forwards;
}
.logo-top .sun-ray:nth-child(7){
transform: rotate(-30deg);
animation: sunRayAnimation 0s ease 0.80s forwards;
}
.logo-top .sun-ray:nth-child(8){
transform: rotate(-20deg);
animation: sunRayAnimation 0s ease 0.85s forwards;
}
.logo-top .sun-ray:nth-child(9){
transform: rotate(-10deg);
animation: sunRayAnimation 0s ease 0.90s forwards;
}
.logo-top .sun-ray:nth-child(10){
transform: rotate(0deg);
animation: sunRayAnimation 0s ease 0.95s forwards;
}
.logo-top .sun-ray:nth-child(11){
transform: rotate(10deg);
animation: sunRayAnimation 0s ease 1.0s forwards;
}
.logo-top .sun-ray:nth-child(12){
transform: rotate(20deg);
animation: sunRayAnimation 0s ease 1.05s forwards;
}
.logo-top .sun-ray:nth-child(13){
transform: rotate(30deg);
animation: sunRayAnimation 0s ease 1.10s forwards;
}
.logo-top .sun-ray:nth-child(14){
transform: rotate(40deg);
animation: sunRayAnimation 0s ease 1.15s forwards;
}
.logo-top .sun-ray:nth-child(15){
transform: rotate(50deg);
animation: sunRayAnimation 0s ease 1.20s forwards;
}
.logo-top .sun-ray:nth-child(16){
transform: rotate(60deg);
animation: sunRayAnimation 0s ease 1.25s forwards;
}
.logo-top .sun-ray:nth-child(17){
transform: rotate(70deg);
animation: sunRayAnimation 0s ease 1.30s forwards;
}
.logo-top .sun-ray:nth-child(18){
transform: rotate(80deg);
animation: sunRayAnimation 0s ease 1.35s forwards;
}
.logo-top .sun-ray:nth-child(19){
transform: rotate(90deg);
animation: sunRayAnimation 0s ease 1.40s forwards;
}
.logo-top .text{
color: var(--textColor);
font-size: 60px;
text-align: center;
position: relative;
top: -45px;
transform: rotate(-10deg);
text-shadow: 1px 3px 1px var(--shadowColor);
}
.logo-top .text span{
margin-right: -10px;
}
.logo-top .text span:nth-child(1){
opacity: 0;
animation: textAnimation 0s ease 1s forwards;
}
.logo-top .text span:nth-child(2){
opacity: 0;
animation: textAnimation 0s ease 1.05s forwards;
}
.logo-top .text span:nth-child(3){
opacity: 0;
animation: textAnimation 0s ease 1.10s forwards;
}
.logo-top .text span:nth-child(4){
opacity: 0;
animation: textAnimation 0s ease 1.15s forwards;
}
.logo-top .text span:nth-child(5){
opacity: 0;
animation: textAnimation 0s ease 1.20s forwards;
}
.logo-top .text span:nth-child(6){
opacity: 0;
animation: textAnimation 0s ease 1.25s forwards;
}
.logo-top .text span:nth-child(7){
opacity: 0;
animation: textAnimation 0s ease 1.30s forwards;
}
.logo-top .text span:nth-child(8){
opacity: 0;
animation: textAnimation 0s ease 1.35s forwards;
}
.logo-top .text span:nth-child(9){
opacity: 0;
animation: textAnimation 0s ease 1.40s forwards;
}
.logo-top .text span:nth-child(10){
opacity: 0;
animation: textAnimation 0s ease 1.45s forwards;
}
.logo-top .text span:nth-child(11){
opacity: 0;
animation: textAnimation 0s ease 1.50s forwards;
}
.logo-bottom{
position: relative;
}
.logo-bottom svg{
width: 335px;
fill: transparent;
animation: svgAnimation 0.1s ease 1.6s forwards;
}
.logo-bottom svg path{
stroke: var(--shadowColor);
stroke-width: 2px;
stroke-dasharray: 0%, 100%;
animation: svgPathAnimation 0.5s ease 1.5s forwards;
}
/*Animations*/
@keyframes sunAnimation {
0%{
transform-origin: bottom;
transform: scale(0) rotate(0deg);
}
100%{
transform: scale(1) rotate(0deg);
}
}
@keyframes sunAnimation2 {
0%{
transform: scale(1) rotate(0deg);
}
100%{
transform: scale(1) rotate(-10deg);
}
}
@keyframes sunRayAnimation {
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes textAnimation {
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes svgAnimation {
0%{
fill: transparent;
}
100%{
fill: var(--shadowColor);
}
}
@keyframes svgPathAnimation {
0%{
stroke-dasharray: 10%,100%;
}
100%{
stroke-dasharray: 0%,0%;
}
}
0 Comments