[SVG] Preloader

Плагин [SVG] Preloader 2.0.7.6

Нет прав для скачивания

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
Skaiman разместил(а) новый ресурс:

[SVG] Preloader - Прелоадер загрузки страниц форума

Прелоадер загрузки страниц как на этом форуме. Подойдет для любого дизайна, светлого или темного, так как фон берется из настроек фона стиля, цвет индикатора, из цветовой палитры.

Посмотреть страницу этого ресурса...
 

25517

Проверенный
Регистрация
29.07.18
Сообщения
17
Реакции
2
Баллы
40
Было бы не плохо,если были настройки стиля и возможность самому настроить анимацию в настройках (да,дохера хочу:))
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
Ну настройки можно добавить только для фона, для цвета лоадера и время показа, анимацию зачем трогать то :)
 

25517

Проверенный
Регистрация
29.07.18
Сообщения
17
Реакции
2
Баллы
40
Skaiman, чтобы сменить на другую:)
Вариантов прелоадеров прудь пруди.
Так-то её тоже можно поменять,но придётся лезть в шаблоны ╮(╯▽╰)╭
 

s7ranger

Проверенный
Регистрация
17.07.18
Сообщения
60
Реакции
5
Баллы
40
Skaiman, мне понравился вот этот прелоадер. Пробовал его вставить по аналогии с инструкцией, на которую вы вчера давали ссылку, подключил, но почему-то постоянно висит в самом верху сайта. Или может подскажете как его правильно подключить?
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
мне понравился вот этот прелоадер. Пробовал его вставить по аналогии с инструкцией, на которую вы вчера давали ссылку, подключил, но почему-то постоянно висит в самом верху сайта. Или может подскажете как его правильно подключить?
HTML:
<div class="svg-loader">
  <div class="loader">
    <svg version="1.2" height="300" width="600" xmlns="http://www.w3.org/2000/svg"
        viewport="0 0 60 60" xmlns:xlink="http://www.w3.org/1999/xlink">
      <path id="pulsar" stroke="rgba(0,155,155,1)" fill="none" stroke-width="1"stroke-linejoin="round" d="M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210" />
    </svg>
  </div>
</div>
JavaScript:
$(window).on('load', function() {
    $preloader = $('.svg-loader'),
        $loader = $preloader.find('.loader');
    $loader.fadeOut();
    $preloader.delay(1000).fadeOut('slow');
});
CSS:
.svg-loader {
  background: #000;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;
}

.loader {
  width: 700px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -350px;
    
 }

.loader svg {
  width: 100%;
  height: 100%;
}

.loader #pulsar{
  stroke-dasharray:281;
  animation: dash 2.5s infinite linear forwards;
}

@-webkit-keyframes dash{ from{stroke-dashoffset:814;} to {stroke-dashoffset:-814;}}
 

25517

Проверенный
Регистрация
29.07.18
Сообщения
17
Реакции
2
Баллы
40
Skaiman, а где старая тема? Там вполне нужная информация есть
 

25517

Проверенный
Регистрация
29.07.18
Сообщения
17
Реакции
2
Баллы
40
Pokschubin, не только. Какие модификации делать не помню:)
 

Pokschubin

Проверенный
Регистрация
07.07.18
Сообщения
264
Решения
3
Реакции
24
Баллы
65
svg_preloader.js
svg_preloader.less
svg_preloader
Сообщение автоматически объединено:

Pokschubin, Скайман подключил свой шаблон в Главную страницу PAGE_CONT....
 

25517

Проверенный
Регистрация
29.07.18
Сообщения
17
Реакции
2
Баллы
40
Skaiman, мне второй прелоадер понравился. Прелоадер на CSS3 (только бы его зациклить как первый)
Что мне в less прописывать?
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
Я сделаю для настройки для вставки пользовательских кодов
 

Pokschubin

Проверенный
Регистрация
07.07.18
Сообщения
264
Решения
3
Реакции
24
Баллы
65
25517,
CSS:
.barlittle {
    background-color:#2187e7;  
    background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff); 
    background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff);
    border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; 
    width:10px;
    height:10px;
    float:left;
    margin-left:5px;
        opacity:0.1;
    -moz-transform:scale(0.7);
    -webkit-transform:scale(0.7);
    -moz-animation:move 1s infinite linear;
    -webkit-animation:move 1s infinite linear;
}
#block_1{
     -moz-animation-delay: .4s;
    -webkit-animation-delay: .4s;
 }
#block_2{
     -moz-animation-delay: .3s;
    -webkit-animation-delay: .3s;
}
#block_3{
     -moz-animation-delay: .2s;
    -webkit-animation-delay: .2s;
}
#block_4{
     -moz-animation-delay: .3s;
    -webkit-animation-delay: .3s;
}
#block_5{
     -moz-animation-delay: .4s;
    -webkit-animation-delay: .4s;
}
@-moz-keyframes move{
    0%{-moz-transform: scale(1.2);opacity:1;}
    100%{-moz-transform: scale(0.7);opacity:0.1;}
}
@-webkit-keyframes move{
    0%{-webkit-transform: scale(1.2);opacity:1;}
    100%{-webkit-transform: scale(0.7);opacity:0.1;}
}
Сообщение автоматически объединено:

Поправил.
Сообщение автоматически объединено:

25517, Получилось сделать второй ?
 
Последнее редактирование:

s7ranger

Проверенный
Регистрация
17.07.18
Сообщения
60
Реакции
5
Баллы
40
Skaiman, благодарю, теперь работает.
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
Значит не так вставляешь. Там же не css и less, короче я позже сделаю примеры. То что вставляешь и не получается, не значит виноват плагин или автор плагина :) Надо еще знать что вставлять, некоторые примеры не работают на версии jquery 3.3.1, которая используется на втором движке, надо изменять js код. Не все так просто :)
 

Похожие темы

Ответы
41
Просмотры
6 тыс.
Верх Низ