Sign in

Зарегистрируйтесь, чтобы стать полноправным участником сообщества Masterpro.ws.

Preloader для Google Chart

Нередко так бывает, что вебмастеру просто необходимо поставить в качестве прелоадера элемента странички (или даже на всю страницу) - хотя бы простенькую какую-то анимацию, ну или даже гифку.

Все что угодно, только чтобы посетители его сайта не подумали, что страничка, не дай бог, зависла. Или вот... существует ведь отличный скрипт для этой цели, spin.js, которому даже вездесущий jQuery без надобности; отлично работает, можете полюбоваться на главной странице этого сайта, видите, там виджет Яндекс Метрики. Хотите знать, как такое делается? - уверяю, ничего сложного. Давайте создадим для начала preloader для скрипта Google Chart; он будет выглядеть у нас с вами следующим образом - welcome на форум (полностью работоспособный пример, вполне можно взять на вооружение). Только не забудьте загрузить с сайта разработчика spin.js, видите, он подключен у нас в самой верхней строчке скрипта... ну вот примерно так, стили - как всегда по вкусу, также рекомендую не забывать, что значение опции 'position' возможно как 'absolute', так и 'relative':

 

 

Positioning

  • Since version 2.0.0 the spinner is absolutely positioned at 50% of its offset parent. You may specify a top and left option to position the spinner manually.
  • Note: The spinner element is a 0×0 pixel DIV that represents the center of the spinner. Hence, if you passed {top:0, left:0} only the lower right quater of the spinner would be inside the target's bounding box.
  • The spinner element must be surrounded by an element using relative positioning, or the spinner will be outside of the parent element.

 

Оставить комментарий

Добавьте ваш комментарий