Preciso fazer uma tela de carregamento em html ou css para um site de manutenção alguém me auxilia como posso fazer ?
Você não deixou claro o que tu precisa!
Cara, preciso de alguma anima animação que quando abre o site começa a animação e depois carrega o conteudo do site tipo uma animação de carregamento.
<html>
<head>
<!-- TEUS SCRIPTS -->
<script src="loader.js"> <!-- esse script vai na head sim para ser carregado primeiro. -->
</head>
<body onload="hideLoader()">
<div class="loader">
<div class="loader-content">
Carregando...
<div class="loader-circle">
<!-- ESTE É O ICONE ANIMADO -->
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 25 25"
to="360 25 25"
dur="0.6s"
repeatCount="indefinite"/>
</path>
</svg>
</div>
</div>
</div>
<!--
.
.
DEIXE O LOADER EM CIMA DO TEU CONTEUDO PARA SER CARREGADO PRIMEIRO! ;)
TEU CONTEÚDO AQUI
.
.
-->
</body>
</html>
//loader.js
function hideLoader (){
document.querySelector('.loader').style.visibility = 'hidden'; // esconde loader
});
.loader {
text-align: center;
position: fixed;
width: 100vw;
height: 100vh;
color: white;
background-color: rgba(0,0,0,0.7);
/* COLOCA UMA FONTE BONITA AQUI ;) */
}
.loader-content {
margin-top: 40vh;
}
.loader-circle {
margin-top: 25px;
vertical-align: middle;
}
.loader-circle path {
fill: white;
}
aqui está um codepen com o exemplo do que está acima: link
Nossa vlw qual o nome que salvo cada arquivo sou iniciante
Oi luan! De nada! daqui a pouco tu pega umas malícias da web hehe.
html: É a tua pagina. nomeia ela com algo que faça sentido ao teu conteúdo e tal. Só cola o código aí de cima nas respectivas regiões HEAD e BODY.
css: põe como loader.css e não esquece de por um no HEAD da página
js: põe loader.js e coloca o no HEAD também, para ser carregado antes do resto da sua página.
Ao carregar, o body irá disparar o listener onLoad especificado no html, nesse caso a função hideLoader() declarada no arquivo loader.js. Mandando esconder a DIV do loader.
Qualquer problema, segue comentando.
Se te solucionou, não esquece de marcar resolvido aqui no forum.
Até.
Estou com dificuldades sou novato em css e js
| LF | PÁGINA INICIAL | <script src="loader.css" async <script src="loader.js" async<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
Esta certo assim ?
Seguinte, adicionei o restante do código html no codepen http://codepen.io/menosprezzi/pen/qRjRRe para te guiar
Repare que css sempre é carregado no HEAD utilizando da tag link acompanhado dos atributos rel e href com o caminho do arquivo.
Scripts JS sempre com a tag script acompanhado do atributo src com o caminho do arquivo js.
O script do loader está na head por ser um script que não depende do carregamento da página (O HTML é lido e carregado de cima pra baixo).
O restante de js que modifica o html (como seleções jquery ex: $(’.alguma-coisa’)) deve estar ao final da tag body, por isso o jquery e o bootstrap.js se encontram lá 
Recomendo essa apostila que lia enquanto estava começando com web. É de leitura rápida, aconselho ler e brincar um pouco com os ensinamentos antes de atacar com algum framework em um projeto real. Também é ótima pra consulta, quando tu esquecer de algum seletor css etc 
Mano vlw mesmo, só uma duvida, como carregar o site ? se ele carrega em cima do conteudo o carregamento
?