Показываем loading в фоне
Этот вариант вставляет картинку в центр страницы
<body> <div class="container"> <div class="row" id="content"> *** </div> </div> </body>
.container {
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Вместо этой картинки я хочу вставить на основе css3 движущийся элемент, вот такой:
#loading {
border:15px solid #fff;
border-top:15px solid #FF6600;
border-radius:50%;
width:50px;
height:50px;
animation:spin 1s linear infinite;
display:block;
margin:0 auto;
left:49%;
position:absolute;
top:50%;
}
@keyframes spin {
0% { transform:rotate(0deg); }
100% { transform:rotate(360deg); }
}
Для этого в html мне нужно добавить новый div, вот так: <body> <div class="container"><div id="loading"></div> <div class="row" id="content"> *** </div> </div> </body> Вопрос, можно ли как-то вставить этот новый движущийся css элемент без добавления тега <div id="loading"></div>. То есть как в первом варианте прямо в container? Если я в css заменяю #loading на .container в css у меня весь контент крутится. |
Цитата:
Ну все правильно - анимарованный стиль применяется к тому элементу, который указа в селекторе. Если хотите крутить элемент внутри .container, то каким образом вы его будете крутить если его не вставить в этот контейнер? Он что у вас есть просит или места занимает слишком? ) |
Я не против, можно и div добавить. Просто может есть какие-то лучше решение. Допустим как я предложил в первом варианте, там не требуется добавлять div
|
dima85,
может тебе нужны псевдоэлементы? (:after, :before)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.container {
height: 100px;
position: relative;
}
.container:after {
content: '';
border:15px solid #fff;
border-top:15px solid #FF6600;
border-radius:50%;
width:50px;
height:50px;
animation:spin 1s linear infinite;
display:block;
margin:0 auto;
left:49%;
position:absolute;
top:50%;
}
@keyframes spin {
0% { transform:rotate(0deg); }
100% { transform:rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<div class="row" id="content">
***
</div>
</div>
</body>
</html>
|
Цитата:
|
| Часовой пояс GMT +3, время: 08:35. |