Какой тип данных вы хотите ... ?? я имею в виду .. сообщения в блогах .. или любые другие вещи ... попробуйте использовать Faker для django, который доказывает поддельные данные.
Добавьте обёртку из #preloader с фиксированным положением. Дайте ему цвет фона, и все готово!
.preloader-main {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
transform: none;
width: 100%;
height: 100%;
background: #FFF;
}
#preloader {
position: absolute;
top: 0;
left: 0;;
right: 0;
bottom: 0;
margin: auto;
height: 3em;
width: 3em;
}
@-webkit-keyframes moveup
{
0%, 60%, 100%
{
-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
}
25%
{
-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
}
}
@keyframes moveup
{
0%, 60%, 100%
{
-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
}
25%
{
-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
}
}
@-webkit-keyframes movedown
{
0%, 60%, 100%
{
-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
}
25%
{
-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
}
}
@keyframes movedown
{
0%, 60%, 100%
{
-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
}
25%
{
-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
}
}
.layer
{
display: block;
position: absolute;
height: 3em;
width: 3em;
box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg);
transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg);
}
.layer:nth-of-type(1)
{
background: #534a47;
margin-top: 1.5em;
-webkit-animation: movedown 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.9s infinite normal;
animation: movedown 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.9s infinite normal;
}
.layer:nth-of-type(1):before
{
content: '';
position: absolute;
width: 85%;
height: 85%;
background: #37332f;
}
.layer:nth-of-type(2)
{
background: #5a96bc;
margin-top: 0.75em;
}
.layer:nth-of-type(3)
{
background: rgba(255, 255, 255, 0.6);
-webkit-animation: moveup 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal;
animation: moveup 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal;
}
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
</head>
<body>
<!-- THEME PRELOADER AREA -->
<div class="preloader-main">
<div id="preloader">
<i class='layer'></i>
<i class='layer'></i>
<i class='layer'></i>
</div>
</div>
Hi this is a demo content
</body>
</html>
Цвет фона должен быть установлен на элементе preloader, но он не имеет размера.
Установите 100% ширину и высоту, чтобы покрыть весь экран, и удалите стиль, чтобы сделать его центрированным, они больше не нужны.
Теперь нам нужно центрировать элементы слоя внутри предварительной нагрузки. Сделайте это, используя левый и верхний 50%.
В качестве дополнительного примечания, префиксы webkit больше не нужны.
#preloader {
position: absolute;
background-color: yellow;
width: 100%;
height: 100%;
}
@keyframes moveup {
0%,
60%,
100% {
transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
}
25% {
transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
}
}
@keyframes movedown {
0%,
60%,
100% {
transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
}
25% {
transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
}
}
.layer {
display: block;
position: absolute;
height: 3em;
width: 3em;
box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg);
left: 50%;
top: 50%;
}
.layer:nth-of-type(1) {
background: #534a47;
margin-top: 1.5em;
animation: movedown 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.9s infinite normal;
}
.layer:nth-of-type(1):before {
content: '';
position: absolute;
width: 85%;
height: 85%;
background: #37332f;
}
.layer:nth-of-type(2) {
background: #5a96bc;
margin-top: 0.75em;
}
.layer:nth-of-type(3) {
background: rgba(255, 255, 255, 0.6);
animation: moveup 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal;
}
<div id="preloader">
<i class='layer'></i>
<i class='layer'></i>
<i class='layer'></i>
</div>
Надеюсь, я правильно понял вопрос, вы можете сделать это с помощью простого js:
Измените свой HTML следующим образом:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<?php include("meta_css.php"); ?>
</head>
<body>
<section>
<div id="content">Page Loaded!</div>
</section>
<div id="preloader">
<i class='layer'></i>
<i class='layer'></i>
<i class='layer'></i>
</div>
</body>
</html>
Добавить CSS для содержимого:
#content{
display:none;
}
Сначала подготовьте функции FadeIn и FadeOut:
function fadeOutEffect(target) {
var fadeTarget = document.getElementById(target);
var fadeEffect = setInterval(function () {
if (!fadeTarget.style.opacity) {
fadeTarget.style.opacity = 1;
}
if (fadeTarget.style.opacity > 0) {
fadeTarget.style.opacity -= 0.1;
}else {
clearInterval(fadeEffect);
fadeTarget.style.display="none";
}
}, 40);
}
function fadeInEffect(target) {
var fadeTarget = document.getElementById(target);
fadeTarget.style.display="block";
var fadeEffect = setInterval(function () {
if (!fadeTarget.style.opacity) {
fadeTarget.style.opacity = 0.1;
}
if (fadeTarget.style.opacity < 1) {
fadeTarget.style.opacity=parseFloat(fadeTarget.style.opacity) + 0.1;
}else {
clearInterval(fadeEffect);
}
}, 40);
}
Затем добавьте это в свой onLoad
fadeOutEffect("preloader");
fadeInEffect("content");
Здесь работает fiddle