Плагин [SVG] Preloader 2.0.7.6

[Skaiman]

Skaiman разместил(а) новый ресурс:

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

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

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

 

[25517]

Было бы не плохо,если были настройки стиля и возможность самому настроить анимацию в настройках (да,дохера хочу)

 

[Skaiman]

Ну настройки можно добавить только для фона, для цвета лоадера и время показа, анимацию зачем трогать то

 

[25517]

Skaiman, чтобы сменить на другую
Вариантов прелоадеров прудь пруди.
Так-то её тоже можно поменять,но придётся лезть в шаблоны ╮(╯▽╰)╭

 

[Skaiman]

Вариантов прелоадеров прудь пруди.
Так-то её тоже можно поменять,но придётся лезть в шаблоны

[TH] Loading Improved

 

[s7ranger]

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

 

[Pokschubin]

Skaiman, А как он прикольно смотрится на моём форуме. Я просто в шоке. На фоне странице.
Можно ли сделать так как будто подключен BlazingFast | Your reliable hosting или Cloudflare - The Web Performance & Security Company | Cloudflare ??????

 

[Skaiman]

Можно ли сделать так как будто подключен

Подключи и будет подключен

 

[Skaiman]

мне понравился вот этот прелоадер. Пробовал его вставить по аналогии с инструкцией, на которую вы вчера давали ссылку, подключил, но почему-то постоянно висит в самом верху сайта. Или может подскажете как его правильно подключить?

<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>

$(window).on('load', function() {
    $preloader = $('.svg-loader'),
        $loader = $preloader.find('.loader');
    $loader.fadeOut();
    $preloader.delay(1000).fadeOut('slow');
});

.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]

Skaiman, а где старая тема? Там вполне нужная информация есть

 

[Pokschubin]

25517, Создание прелоадера (preloader) для сайта с помощью jQuery и CSS стилей держи. Это наверное искал ?

 

[25517]

Pokschubin, не только. Какие модификации делать не помню

 

[Pokschubin]

svg_preloader.js
svg_preloader.less
svg_preloader

Сообщение автоматически объединено: 06.08.2018

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

 

[25517]

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

 

[Skaiman]

Я сделаю для настройки для вставки пользовательских кодов

 

[Pokschubin]

25517,

.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;}
}

Сообщение автоматически объединено: 06.08.2018

Поправил.

Сообщение автоматически объединено: 06.08.2018

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

 

[s7ranger]

Skaiman, благодарю, теперь работает.

 

[Skaiman]

Skaiman обновил ресурс [SVG] Preloader новой записью:

Обновление до версии 2.0.7.3

Добавил настройки для вставки своих кодов.
Посмотреть вложение 298

Посмотреть подробности об этом обновлении...

 

[25517]

Skaiman, вставляю код ,а он не работает ╮(╯▽╰)╭
http://codepen.io/pwsm50/pen/kmapB

 

[Skaiman]

Значит не так вставляешь. Там же не css и less, короче я позже сделаю примеры. То что вставляешь и не получается, не значит виноват плагин или автор плагина Надо еще знать что вставлять, некоторые примеры не работают на версии jquery 3.3.1, которая используется на втором движке, надо изменять js код. Не все так просто