Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.03.2017, 15:47
Профессор
Отправить личное сообщение для dima85 Посмотреть профиль Найти все сообщения от dima85
 
Регистрация: 14.03.2010
Сообщений: 194

Показываем 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 у меня весь контент крутится.
Ответить с цитированием
  #2 (permalink)  
Старый 02.03.2017, 18:08
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от dima85
Если я в css заменяю #loading на .container в css у меня весь контент крутится.
Не вздумайте да тега BODY добраться, укажите его, будет крутиться монитор.

Ну все правильно - анимарованный стиль применяется к тому элементу, который указа в селекторе. Если хотите крутить элемент внутри .container, то каким образом вы его будете крутить если его не вставить в этот контейнер? Он что у вас есть просит или места занимает слишком? )
Ответить с цитированием
  #3 (permalink)  
Старый 02.03.2017, 18:13
Профессор
Отправить личное сообщение для dima85 Посмотреть профиль Найти все сообщения от dima85
 
Регистрация: 14.03.2010
Сообщений: 194

Я не против, можно и div добавить. Просто может есть какие-то лучше решение. Допустим как я предложил в первом варианте, там не требуется добавлять div
Ответить с цитированием
  #4 (permalink)  
Старый 02.03.2017, 18:40
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

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>
Ответить с цитированием
  #5 (permalink)  
Старый 03.03.2017, 05:32
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от dima85
Просто может есть какие-то лучше решение.
Ну лучше, не лучше сказать трудно, но как показали через псевдоэлементы, только в вашем случае нужно не container его определять, а через второе имя класса, которое добавлять/удалять у container. Ну или содержимое должно перекрывать этот псевдоэлемент и он не мешал на протяжении всей работы слайдера.

Последний раз редактировалось laimas, 03.03.2017 в 09:21.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вопрос. Обращение к DOM элементам в фоне. sibirser Events/DOM/Window 2 20.07.2015 17:38
cordova js работа приложения в фоне l-liava-l Оффтопик 0 23.04.2014 12:04
Фэнсибокс: ошибка loading is undefined l@pteff jQuery 1 19.03.2014 16:19
XHR finished loading khusamov jQuery 6 08.06.2012 15:39
Как сделать что бы фотография открывалась на черном фоне? Incognito Элементы интерфейса 4 22.09.2010 15:46