Стеклянный эффект

Zoom эффект при наведении

Размытие объекта

Трансформация текста

Круглый анимированный progress bar

Круглый анимированный progress bar

На свой сайт или страницу подключить такой прелоадер, можно довольно не сложно.
Первое что понадобится сделать для осуществления задумки, это конечно же вставить HTML разметку.
Сделать это можно, например в шапке сайта. Вставьте в любое место, лучше всего сразу после открывающего тега body.
Это основной блок с ID p_prldr, который будет заполнять весь экран и внутри которого можно расположить что угодно, что увидит посетитель до полной загрузки страницы.
Внутри этого блока разместим анимацию загрузки и текст.
Блок с классом svg_anm, это наша анимация. В своем прелоадере я использую SVG графику для анимации. Ее можно масштабировать до нужных мне размеров и выглядит она реалистично и прикольно. Если хотите, можете использовать какую-то GIF анимацию или просто статичную картинку, все зависит от Вашей фантазии. У меня это файл oval.svg его размер я установил параметром background-size:41px;, также нужно указать ширину и высоту блока равную размерам анимации. width: 41px; height: 41px;Если Вам тоже по душе такая анимация, можете выбрать из ниже приведенных, для этого правой кнопкой миши щелкните по нужной и сохраните в нужную папку.

Чтобы все заработало, нужно добавить сам скрипт прелоадера, но для начала Вы должны убедится, что у Вас подключена библиотека jQuery.