HTML (2)


Page Preloader Simples: uma barra de progresso multicolorida

Page Preloaders são legais. Dão um aspecto legal ao carregar a página.

Este é o código de page preloader simples.

<!DOCTYPE html>
<html>
<head>
<style>
#preloader {
    width: 0%;
    height: 10px;
    background-color: red;
    position: relative;
    animation: preload 5s linear 0s infinite alternate;
}

@keyframes preload {
    0%   {background-color:red; width: 0%;}
    25%  {background-color:yellow; width: 25%;}
    50%  {background-color:blue; width: 50%;}
    75%  {background-color:green; width: 75%;}
    100% {background-color:red; width: 100%;}
}
</style>
</head>
<body>

<div id="preloader"></div>

</body>
</html>

Uma observação:

No código não tem, mas no final do BODY ou no evento onLoad do BODY, coloque um Javascript para retirar o preloader.

document.getElementById("preloader").style.display = none;


%d blogueiros gostam disto: