CODEWITHSUNDEEP
htmlcss
Jon Bridge
Jon Bridge

Reputation: 329

How can I implement a preloader animation into my website?

How can I implement a pre shown web page into my size which displays for a few seconds when the user first clicks on the URL of my website? For example, on this website the developer has put a logo with a transition of some sort and then his website loads. I'm trying to implement this into my website. However, I was wondering if anyone new the technical name for this so I can read up on how to do it and if anyone could possibly show me how to do it and get me going?

Here is my codepen for my website. I linked this incase you need to add some code in order for the webpage to display there at the start for around 3 seconds.

Here is the codepen I want to be displayed for the 3 seconds at the start.

Below is the HTML/CSS of the codepen I'm trying to display for 3 seconds before the website loads.

body{
	background:#333;
	background: -webkit-gradient(radial, center center, 120, center center, 900, from(#111), to(#111));
	background:-moz-radial-gradient(circle, #111, #111);

}
.loader{
	margin:200px auto;
}
h1{
	font-family: 'Actor', sans-serif;
	color:#FFF;
	font-size:16px;
	letter-spacing:1px;
	font-weight:200;
	text-align:center;
}
.loader span{
	width:16px;
	height:16px;
	border-radius:50%;
	display:inline-block;
	position:absolute;
	left:50%;
	margin-left:-10px;
	-webkit-animation:3s infinite linear;
	-moz-animation:3s infinite linear;
	-o-animation:3s infinite linear;
	
}


.loader span:nth-child(2){
	background:blye;
	-webkit-animation:kiri 1.2s infinite linear;
	-moz-animation:kiri 1.2s infinite linear;
	-o-animation:kiri 1.2s infinite linear;
	
}
.loader span:nth-child(3){
	background:red;
	z-index:100;
}
.loader span:nth-child(4){
	background:red;
	-webkit-animation:kanan 1.2s infinite linear;
	-moz-animation:kanan 1.2s infinite linear;
	-o-animation:kanan 1.2s infinite linear;
}


@-webkit-keyframes kanan {
    0% {-webkit-transform:translateX(20px);
    }
   
	50%{-webkit-transform:translateX(-20px);
	}
	
	100%{-webkit-transform:translateX(20px);
	z-index:200;
	}
}
@-moz-keyframes kanan {
    0% {-moz-transform:translateX(20px);
    }
   
	50%{-moz-transform:translateX(-20px);
	}
	
	100%{-moz-transform:translateX(20px);
	z-index:200;
	}
}
@-o-keyframes kanan {
    0% {-o-transform:translateX(20px);
    }
   
	50%{-o-transform:translateX(-20px);
	}
	
	100%{-o-transform:translateX(20px);
	z-index:200;
	}
}




@-webkit-keyframes kiri {
     0% {-webkit-transform:translateX(-20px);
	z-index:200;
    }
	50%{-webkit-transform:translateX(20px);
	}
	100%{-webkit-transform:translateX(-20px);
	}
}

@-moz-keyframes kiri {
     0% {-moz-transform:translateX(-20px);
	z-index:200;
    }
	50%{-moz-transform:translateX(20px);
	}
	100%{-moz-transform:translateX(-20px);
	}
}
@-o-keyframes kiri {
     0% {-o-transform:translateX(-20px);
	z-index:200;
    }
	50%{-o-transform:translateX(20px);
	}
	100%{-o-transform:translateX(-20px);
	}
}
<html>
<head>

<link rel="stylesheet" href="css/style.css" />
<link href='https://fonts.googleapis.com/css?family=Actor' rel='stylesheet' type='text/css'>
</head>

<body>
<div class="loader">
    <h1>LIAM DOCHERTY'S PORTFOLIO IS</h1>
    <span></span>
    <span></span>
    <span></span>
  <br>
  <h1>LOADING</h1>
</div>
</body>
</html>

Upvotes: 2

Views: 2653

Answers (3)

Nishikanta Ray
Nishikanta Ray

Reputation: 1

<html>
<head>
    <link rel="stylesheet" href="css/style.css" />
    <link href='https://fonts.googleapis.com/css?family=Actor' rel='stylesheet' type='text/css'>
</head>
<body>
// <div class="splash"> change to  <div id="splash">
    <div id="splash">
        <h1>LIAM DOCHERTY'S PORTFOLIO IS</h1>
        <span></span>
        <span></span>
        <span></span>
        <br>
        <h1>LOADING</h1>
    </div>
    <div id="app"></div>
</body>
</html>

Upvotes: 0

Karan Hudia
Karan Hudia

Reputation: 573

It is called splash screen in case of android, you can use the same term for web or you can call it loading screen. The trick behind implementing it is usually to show the splash screen until the webapp is loaded.

Lets say for your code-

<html>
<head>
    <link rel="stylesheet" href="css/style.css" />
    <link href='https://fonts.googleapis.com/css?family=Actor' rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="splash">
        <h1>LIAM DOCHERTY'S PORTFOLIO IS</h1>
        <span></span>
        <span></span>
        <span></span>
        <br>
        <h1>LOADING</h1>
    </div>
    <div id="app"></div>
</body>
</html>

And CSS

body{
    background:#333;
    background: -webkit-gradient(radial, center center, 120, center center, 900, from(#111), to(#111));
    background:-moz-radial-gradient(circle, #111, #111);

}
#app {
    display: none;
}
.splash{
    margin:200px auto;
}
h1{
    font-family: 'Actor', sans-serif;
    color:#FFF;
    font-size:16px;
    letter-spacing:1px;
    font-weight:200;
    text-align:center;
}
.splash span{
    width:16px;
    height:16px;
    border-radius:50%;
    display:inline-block;
    position:absolute;
    left:50%;
    margin-left:-10px;
    -webkit-animation:3s infinite linear;
    -moz-animation:3s infinite linear;
    -o-animation:3s infinite linear;

}


.splash span:nth-child(2){
    background:blue;
    -webkit-animation:kiri 1.2s infinite linear;
    -moz-animation:kiri 1.2s infinite linear;
    -o-animation:kiri 1.2s infinite linear;

}
.splash span:nth-child(3){
    background:red;
    z-index:100;
}
.splash span:nth-child(4){
    background:red;
    -webkit-animation:kanan 1.2s infinite linear;
    -moz-animation:kanan 1.2s infinite linear;
    -o-animation:kanan 1.2s infinite linear;
}


@-webkit-keyframes kanan {
    0% {-webkit-transform:translateX(20px);
    }

    50%{-webkit-transform:translateX(-20px);
    }

    100%{-webkit-transform:translateX(20px);
    z-index:200;
    }
}
@-moz-keyframes kanan {
    0% {-moz-transform:translateX(20px);
    }

    50%{-moz-transform:translateX(-20px);
    }

    100%{-moz-transform:translateX(20px);
    z-index:200;
    }
}
@-o-keyframes kanan {
    0% {-o-transform:translateX(20px);
    }

    50%{-o-transform:translateX(-20px);
    }

    100%{-o-transform:translateX(20px);
    z-index:200;
    }
}




@-webkit-keyframes kiri {
     0% {-webkit-transform:translateX(-20px);
    z-index:200;
    }
    50%{-webkit-transform:translateX(20px);
    }
    100%{-webkit-transform:translateX(-20px);
    }
}

@-moz-keyframes kiri {
     0% {-moz-transform:translateX(-20px);
    z-index:200;
    }
    50%{-moz-transform:translateX(20px);
    }
    100%{-moz-transform:translateX(-20px);
    }
}
@-o-keyframes kiri {
     0% {-o-transform:translateX(-20px);
    z-index:200;
    }
    50%{-o-transform:translateX(20px);
    }
    100%{-o-transform:translateX(-20px);
    }
}

You can either use it in two ways now-

  1. You can either make it dependent on your scripts, that until the js files are loaded, splash screen will display.
  2. Or you can simply display the splash screen for 3 seconds and continue with your webapp.

To do the first, simply add the following script tag after all the other js files script tags( or simple after body tag. HTML won't run this script tag until it has fetched the js files added before it.

<script>
    document.getElementById('app').style['display'] = 'block';
    document.getElementById('splash').style['display'] = 'none';
</script>

To do the second, add a settimeout() method to your script tag and place it at the head of your HTML.

<script>
    setTimeout(function(){ 
        document.getElementById('app').style['display'] = 'block';
        document.getElementById('splash').style['display'] = 'none';
    }, 3000);
</script>

Upvotes: 2

Pons Purushothaman
Pons Purushothaman

Reputation: 2261

If you are looking for a preloader, use a structure like this

<div id="preloader" style="display:block">preloader here</div>
<div id="webpage" style="display:none">site content</div>

then using script, on page load, hide "#preloader" and show "#webpage" like below

$(window).load(function(){
  $("#preloader").hide();
  $("#webpage"").show();
})

Upvotes: 0

Related Questions