Как изменить страницу загрузки сайта

I'm working on a site which contains a whole bunch of mp3s and images, and I'd like to display a loading gif while all the content loads. I have no idea how to achieve this, but I do have the ani...

I’m working on a site which contains a whole bunch of mp3s and images, and I’d like to display a loading gif while all the content loads.

I have no idea how to achieve this, but I do have the animated gif I want to use.

Any suggestions?

KyleMit's user avatar

KyleMit♦

36.7k63 gold badges440 silver badges635 bronze badges

asked Oct 28, 2008 at 17:52

user27171's user avatar

Typically sites that do this by loading content via ajax and listening to the readystatechanged event to update the DOM with a loading GIF or the content.

How are you currently loading your content?

The code would be similar to this:

function load(url) {
    // display loading image here...
    document.getElementById('loadingImg').visible = true;
    // request your data...
    var req = new XMLHttpRequest();
    req.open("POST", url, true);

    req.onreadystatechange = function () {
        if (req.readyState == 4 && req.status == 200) {
            // content is loaded...hide the gif and display the content...
            if (req.responseText) {
                document.getElementById('content').innerHTML = req.responseText;
                document.getElementById('loadingImg').visible = false;
            }
        }
    };
    request.send(vars);
}

There are plenty of 3rd party javascript libraries that may make your life easier, but the above is really all you need.

KyleMit's user avatar

KyleMit♦

36.7k63 gold badges440 silver badges635 bronze badges

answered Oct 28, 2008 at 17:55

mmattax's user avatar

mmattaxmmattax

26.9k41 gold badges115 silver badges149 bronze badges

1

You said you didn’t want to do this in AJAX. While AJAX is great for this, there is a way to show one DIV while waiting for the entire <body> to load. It goes something like this:

<html>
  <head>
    <style media="screen" type="text/css">
      .layer1_class { position: absolute; z-index: 1; top: 100px; left: 0px; visibility: visible; }
      .layer2_class { position: absolute; z-index: 2; top: 10px; left: 10px; visibility: hidden }
    </style>
    <script>
      function downLoad(){
        if (document.all){
            document.all["layer1"].style.visibility="hidden";
            document.all["layer2"].style.visibility="visible";
        } else if (document.getElementById){
            node = document.getElementById("layer1").style.visibility='hidden';
            node = document.getElementById("layer2").style.visibility='visible';
        }
      }
    </script>
  </head>
  <body onload="downLoad()">
    <div id="layer1" class="layer1_class">
      <table width="100%">
        <tr>
          <td align="center"><strong><em>Please wait while this page is loading...</em></strong></p></td>
        </tr>
      </table>
    </div>
    <div id="layer2" class="layer2_class">
        <script type="text/javascript">
                alert('Just holding things up here.  While you are reading this, the body of the page is not loading and the onload event is being delayed');
        </script>
        Final content.      
    </div>
  </body>
</html>

The onload event won’t fire until all of the page has loaded. So the layer2 <DIV> won’t be displayed until the page has finished loading, after which onload will fire.

answered Nov 4, 2010 at 19:43

Mike E.'s user avatar

Mike E.Mike E.

4515 silver badges6 bronze badges

2

How about with jQuery? A simple…

$(window).load(function() {      //Do the code in the {}s when the window has loaded 
  $("#loader").fadeOut("fast");  //Fade out the #loader div
});

And the HTML…

<div id="loader"></div>

And CSS…

#loader {
      width: 100%;
      height: 100%;
      background-color: white;
      margin: 0;
}

Then in your loader div you would put the GIF, and any text you wanted, and it will fade out once the page has loaded.

answered Dec 7, 2014 at 7:31

joe_young's user avatar

joe_youngjoe_young

4,0682 gold badges26 silver badges38 bronze badges

#Pure css method

Place this at the top of your code (before header tag)

<style> .loader {
  position: fixed;
  background-color: #FFF;
  opacity: 1;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}
</style>
<div class="loader">
  Your Content For Load Screen
</div>

And This At The Bottom after all other code (except /html tag)

<style>
.loader {
    -webkit-animation: load-out 1s;
    animation: load-out 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes load-out {
    from {
        top: 0;
        opacity: 1;
    }

    to {
        top: 100%;
        opacity: 0;
    }
}

@keyframes load-out {
    from {
        top: 0;
        opacity: 1;
    }

    to {
        top: 100%;
        opacity: 0;
    }
}
</style>

This always works for me 100% of the time

answered Apr 21, 2016 at 11:33

MindCraftMagic's user avatar

1

First, set up a loading image in a div. Next, get the div element. Then, set a function that edits the css to make the visibility to «hidden». Now, in the <body>, put the onload to the function name.

Mr Lister's user avatar

Mr Lister

44.9k15 gold badges109 silver badges148 bronze badges

answered Dec 31, 2015 at 21:57

Peach's user avatar

PeachPeach

211 bronze badge

1

There’s actually a pretty easy way to do this. The code should be something like:

<script type="test/javascript">

    function showcontent(x){

      if(window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }

      xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState == 1) {
            document.getElementById('content').innerHTML = "<img src='loading.gif' />";
        }
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          document.getElementById('content').innerHTML = xmlhttp.responseText;
        } 
      }

      xmlhttp.open('POST', x+'.html', true);
      xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
      xmlhttp.send(null);

    }

And in the HTML:

<body onload="showcontent(main)"> <!-- onload optional -->
<div id="content"><img src="loading.gif"></div> <!-- leave img out if not onload -->
</body>

I did something like that on my page and it works great.

SchmitzIT's user avatar

SchmitzIT

9,0549 gold badges65 silver badges90 bronze badges

answered Jun 29, 2012 at 3:32

Johnz's user avatar

JohnzJohnz

111 bronze badge

You can use <progress> element in HTML5. See this page for source code and live demo. http://purpledesign.in/blog/super-cool-loading-bar-html5/

here is the progress element…

<progress id="progressbar" value="20" max="100"></progress>

this will have the loading value starting from 20. Of course only the element wont suffice. You need to move it as the script loads. For that we need JQuery. Here is a simple JQuery script that starts the progress from 0 to 100 and does something in defined time slot.

<script>
        $(document).ready(function() {
         if(!Modernizr.meter){
         alert('Sorry your brower does not support HTML5 progress bar');
         } else {
         var progressbar = $('#progressbar'),
         max = progressbar.attr('max'),
         time = (1000/max)*10, 
         value = progressbar.val();
        var loading = function() {
        value += 1;
        addValue = progressbar.val(value);
        $('.progress-value').html(value + '%');
        if (value == max) {
        clearInterval(animate);
        //Do Something
 }
if (value == 16) {
//Do something 
}
if (value == 38) {
//Do something
}
if (value == 55) {
//Do something 
}
if (value == 72) {
//Do something 
}
if (value == 1) {
//Do something 
}
if (value == 86) {
//Do something 
    }

};
var animate = setInterval(function() {
loading();
}, time);
};
});
</script>

Add this to your HTML file.

<div class="demo-wrapper html5-progress-bar">
<div class="progress-bar-wrapper">
 <progress id="progressbar" value="0" max="100"></progress>
 <span class="progress-value">0%</span>
</div>
 </div>

Hope this will give you a start.

answered Jan 8, 2014 at 20:33

Raj Nandan Sharma's user avatar

Источник

I’m working on a site which contains a whole bunch of mp3s and images, and I’d like to display a loading gif while all the content loads.

I have no idea how to achieve this, but I do have the animated gif I want to use.

Any suggestions?

KyleMit's user avatar

KyleMit♦

36.7k63 gold badges440 silver badges635 bronze badges

asked Oct 28, 2008 at 17:52

user27171's user avatar

Typically sites that do this by loading content via ajax and listening to the readystatechanged event to update the DOM with a loading GIF or the content.

How are you currently loading your content?

The code would be similar to this:

function load(url) {
    // display loading image here...
    document.getElementById('loadingImg').visible = true;
    // request your data...
    var req = new XMLHttpRequest();
    req.open("POST", url, true);

    req.onreadystatechange = function () {
        if (req.readyState == 4 && req.status == 200) {
            // content is loaded...hide the gif and display the content...
            if (req.responseText) {
                document.getElementById('content').innerHTML = req.responseText;
                document.getElementById('loadingImg').visible = false;
            }
        }
    };
    request.send(vars);
}

There are plenty of 3rd party javascript libraries that may make your life easier, but the above is really all you need.

KyleMit's user avatar

KyleMit♦

36.7k63 gold badges440 silver badges635 bronze badges

answered Oct 28, 2008 at 17:55

mmattax's user avatar

mmattaxmmattax

26.9k41 gold badges115 silver badges149 bronze badges

1

You said you didn’t want to do this in AJAX. While AJAX is great for this, there is a way to show one DIV while waiting for the entire <body> to load. It goes something like this:

<html>
  <head>
    <style media="screen" type="text/css">
      .layer1_class { position: absolute; z-index: 1; top: 100px; left: 0px; visibility: visible; }
      .layer2_class { position: absolute; z-index: 2; top: 10px; left: 10px; visibility: hidden }
    </style>
    <script>
      function downLoad(){
        if (document.all){
            document.all["layer1"].style.visibility="hidden";
            document.all["layer2"].style.visibility="visible";
        } else if (document.getElementById){
            node = document.getElementById("layer1").style.visibility='hidden';
            node = document.getElementById("layer2").style.visibility='visible';
        }
      }
    </script>
  </head>
  <body onload="downLoad()">
    <div id="layer1" class="layer1_class">
      <table width="100%">
        <tr>
          <td align="center"><strong><em>Please wait while this page is loading...</em></strong></p></td>
        </tr>
      </table>
    </div>
    <div id="layer2" class="layer2_class">
        <script type="text/javascript">
                alert('Just holding things up here.  While you are reading this, the body of the page is not loading and the onload event is being delayed');
        </script>
        Final content.      
    </div>
  </body>
</html>

The onload event won’t fire until all of the page has loaded. So the layer2 <DIV> won’t be displayed until the page has finished loading, after which onload will fire.

answered Nov 4, 2010 at 19:43

Mike E.'s user avatar

Mike E.Mike E.

4515 silver badges6 bronze badges

2

How about with jQuery? A simple…

$(window).load(function() {      //Do the code in the {}s when the window has loaded 
  $("#loader").fadeOut("fast");  //Fade out the #loader div
});

And the HTML…

<div id="loader"></div>

And CSS…

#loader {
      width: 100%;
      height: 100%;
      background-color: white;
      margin: 0;
}

Then in your loader div you would put the GIF, and any text you wanted, and it will fade out once the page has loaded.

answered Dec 7, 2014 at 7:31

joe_young's user avatar

joe_youngjoe_young

4,0682 gold badges26 silver badges38 bronze badges

#Pure css method

Place this at the top of your code (before header tag)

<style> .loader {
  position: fixed;
  background-color: #FFF;
  opacity: 1;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}
</style>
<div class="loader">
  Your Content For Load Screen
</div>

And This At The Bottom after all other code (except /html tag)

<style>
.loader {
    -webkit-animation: load-out 1s;
    animation: load-out 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes load-out {
    from {
        top: 0;
        opacity: 1;
    }

    to {
        top: 100%;
        opacity: 0;
    }
}

@keyframes load-out {
    from {
        top: 0;
        opacity: 1;
    }

    to {
        top: 100%;
        opacity: 0;
    }
}
</style>

This always works for me 100% of the time

answered Apr 21, 2016 at 11:33

MindCraftMagic's user avatar

1

First, set up a loading image in a div. Next, get the div element. Then, set a function that edits the css to make the visibility to «hidden». Now, in the <body>, put the onload to the function name.

Mr Lister's user avatar

Mr Lister

44.9k15 gold badges109 silver badges148 bronze badges

answered Dec 31, 2015 at 21:57

Peach's user avatar

PeachPeach

211 bronze badge

1

There’s actually a pretty easy way to do this. The code should be something like:

<script type="test/javascript">

    function showcontent(x){

      if(window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }

      xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState == 1) {
            document.getElementById('content').innerHTML = "<img src='loading.gif' />";
        }
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          document.getElementById('content').innerHTML = xmlhttp.responseText;
        } 
      }

      xmlhttp.open('POST', x+'.html', true);
      xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
      xmlhttp.send(null);

    }

And in the HTML:

<body onload="showcontent(main)"> <!-- onload optional -->
<div id="content"><img src="loading.gif"></div> <!-- leave img out if not onload -->
</body>

I did something like that on my page and it works great.

SchmitzIT's user avatar

SchmitzIT

9,0549 gold badges65 silver badges90 bronze badges

answered Jun 29, 2012 at 3:32

Johnz's user avatar

JohnzJohnz

111 bronze badge

You can use <progress> element in HTML5. See this page for source code and live demo. http://purpledesign.in/blog/super-cool-loading-bar-html5/

here is the progress element…

<progress id="progressbar" value="20" max="100"></progress>

this will have the loading value starting from 20. Of course only the element wont suffice. You need to move it as the script loads. For that we need JQuery. Here is a simple JQuery script that starts the progress from 0 to 100 and does something in defined time slot.

<script>
        $(document).ready(function() {
         if(!Modernizr.meter){
         alert('Sorry your brower does not support HTML5 progress bar');
         } else {
         var progressbar = $('#progressbar'),
         max = progressbar.attr('max'),
         time = (1000/max)*10, 
         value = progressbar.val();
        var loading = function() {
        value += 1;
        addValue = progressbar.val(value);
        $('.progress-value').html(value + '%');
        if (value == max) {
        clearInterval(animate);
        //Do Something
 }
if (value == 16) {
//Do something 
}
if (value == 38) {
//Do something
}
if (value == 55) {
//Do something 
}
if (value == 72) {
//Do something 
}
if (value == 1) {
//Do something 
}
if (value == 86) {
//Do something 
    }

};
var animate = setInterval(function() {
loading();
}, time);
};
});
</script>

Add this to your HTML file.

<div class="demo-wrapper html5-progress-bar">
<div class="progress-bar-wrapper">
 <progress id="progressbar" value="0" max="100"></progress>
 <span class="progress-value">0%</span>
</div>
 </div>

Hope this will give you a start.

answered Jan 8, 2014 at 20:33

Raj Nandan Sharma's user avatar

Источник

Как настроить стартовую страницу в браузере?

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

  • Как поменять домашнюю страницу в браузере?
    • Mozilla Firefox – возможные варианты настройки, пошаговое руководство со скриншотами
  • Google Chrome — возможные варианты настройки, пошаговое руководство со скриншотами
  • Internet Explorer — возможные варианты настройки, пошаговое руководство со скриншотами
  • Microsoft Edge — возможные варианты настройки
  • Opera — возможные варианты настройки, пошаговое руководство со скриншотами
  • О плагине Speed Dial FVD для браузера Mozilla Firefox
  • Что делать если в браузере Firefox не меняется стартовая (домашняя) страница?
  • Выводы

Настройка стартовой страницы в каждом из наиболее популярных браузеров имеет свои тонкости. Рассмотрим их более подробно.

Чтобы изменить установленную домашнюю страницу (ту, которая будет открываться при клике по значку «Домашняя страница Firefox») на какую-то в браузере Mozilla Firefox нужно сделать следующее:

  • кликнуть по значку «Открыть меню», расположенному в правом верхнем углу браузера;

  • Mozilla Firefox – возможные варианты настройки, пошаговое руководство со скриншотами

  • кликаем по строке «Настройки»;

  • Mozilla Firefox – возможные варианты настройки, пошаговое руководство со скриншотами - 2

  • в левом меню выбираем строку «Начало»;

  • в выпадающем меню «Домашняя страница и новые окна» выбираем один из трех возможных вариантов: «домашняя страница Firefox (по умолчанию)», «мой URL» (можно самостоятельно задать адрес сайта, который вы хотите установить в качестве стартовой веб-страницы), «пустая страница».

Кроме этого в Mozilla Firefox можно задать режим открытия веб-страниц при запуске браузера. Для этого требуется перейти в подменю настроек «Основные» и установить или снять галочку рядом со строкой «Восстанавливать предыдущую сессию». Если данная отметка будет установлена, то при следующей загрузке браузера будут автоматически загружены все страницы, которые были перед закрытием Firefox.

В браузере Google Chrome нет классической домашней страницы, но на специальном экране можно менять страницы, которые будут загружаться при старте программы. Для этого необходимо сделать следующее:

  • кликнуть по значку главного меню в виде трех точек, которое располагается вверху справа;
  • зайти в настройки;

  • Google Chrome - возможные варианты настройки, пошаговое руководство со скриншотами

  • внизу окна найти раздел «Запуск Chrome».

Здесь можно задать один из трех режимов запуска браузера Google Chrome:

  1. «Новая вкладка» — будет открываться пустая вкладка.
  2. «Ранее открытые вкладки» — загрузятся те веб-страницы, которые были открыты в момент завершения предыдущего сеанса работы с браузером.
  3. «Заданные страницы» — в этом режиме можно задать, какие веб-страницы будут открываться при запуске Google Chrome.

Google Chrome - возможные варианты настройки, пошаговое руководство со скриншотами - 2

Чтобы указать веб-страницы, которые будут загружаться по умолчанию, нужно выбрать пункт «Заданные страницы» и кликнуть по строке «Добавить страницу». После этого, в появившемся окне, можно будет ввести адрес нужного сайта.

Чтобы настроить параметры загрузки в браузере Internet Explorer нужно сделать следующее:

  • кликнуть по значку настройки, который имеет форму шестеренки и расположен справа в верхней части окна программы;
  • выбираем пункт меню «Свойства браузера»;

  • Internet Explorer - возможные варианты настройки, пошаговое руководство со скриншотами

  • на вкладке «Общие» можно задать домашнюю страницу, для этого есть три кнопки с различными вариантами: «текущая», «исходная» и «использовать новую вкладку».

  • Internet Explorer - возможные варианты настройки, пошаговое руководство со скриншотами - 2

Здесь же можно задать параметры автозагрузки. Существует два варианта: загружать веб-страницы, которые были открыты в предыдущем сеансе работы или же загружать конкретную домашнюю страницу.

Чтобы настроить параметры загрузки браузера Microsoft Edge нужно выполнить следующие действия:

  • зайти в меню кликнув по значку в виде трех точек;
  • кликнуть по строке «Параметры»;
  • в строке «Показывать в новом окне Microsoft Edge» выберите пункт «Конкретную страницу»;
  • в соответствующей строке введите адрес нужной веб-страницы;
  • после этого можно добавить еще один или сразу несколько сайтов кликнув по строке «Добавить новую страницу».

В браузере Opera также можно задать то, какие веб-страницы будут загружаться при запуске браузера. Для этого нужно:

  • кликнуть по красной букве «О» расположенной слева в верхней части окна браузера;
  • выбрать подменю «Настройки»;
  • найти раздел «При запуске»;

  • Opera - возможные варианты настройки, пошаговое руководство со скриншотами

  • поставить галочку в строке «Открыть определенную страницу или несколько страниц»;
  • кликнуть по кнопке «Добавить новую страницу»;
  • ввести нужный веб-адрес.

  • Opera - возможные варианты настройки, пошаговое руководство со скриншотами - 2

Расширение Speed Dial разработано для того, чтобы облегчить работу с закладками. Установить его можно через стандартный магазин дополнений Mozilla Firefox. Это приложение имеет красивый интерфейс и просто в управлении.

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

  • отключить все активные расширения и после это изменить домашнюю страницу, если все получилось, включайте все расширения по одному и проверяйте, какое из них меняет адрес стартовой страницы;
  • проверьте ярлык браузера на предмет того не указана ли в нем стартовая страница;
  • проверьте свой ПК на вирусы.

Во всех наиболее популярных браузерах можно указать веб-страницы, загружаемые при старте программы. Теперь вы знаете, как это можно сделать в Mozilla Firefox, Google Chrome, Internet Explorer, Microsoft Edge и Opera.

Источник

Эффект загрузки страницы — создание эффекта при загрузке страницы


Эффект загрузки страницы — создание эффекта при загрузке страницы

Долго грузиться сайт? И вы не хотите чтобы человек видел как сайт загружается по частям, а хотите чтобы он видел только полностью загруженный сайт? Тогда этот урок для вас. То есть посетитель заходит на сайт и видит индикатор загрузки, по истечении которого появляется сайт с красивым переходом. Может для блогов или порталов использование такого эффекта будет только мешать посетителям, то на продающих страницах он будет весьма кстати.

Скачать (необходимо будет подождать 10 секунд) и посмотреть пример вы можете по ссылкам ниже:

Смотреть примерСкачать

Раньше я писал об индикаторах загрузки, поэтому рекомендую посмотреть еще их:

  • Собственный индикатор загрузки страницы

Ну и вот еще несколько статей о том, что можно сделать с помощью jQuery:

  • Красивый выпадающий список для сайта
  • Полностью анимированное меню на Javascript
  • Интерактивный фон для сайта + видео
  • Плавное перемещение по странице jQuery

Эффект при загрузке страницы

В чем, собственно, суть: когда пользователь попадает на сайт, он видит перед собой серый фон, на котором изображен логотип сайта. Также он видит индикатора загрузки, который постепенно заполняется. Для индикатора загрузки используем SVG. После заполнения с помощью красивого эффекта появляется уже загруженная страница сайта, а область с логотипом плавно исчезает.

Вот страница после исчезновения индикатора загрузки:

После индикатора загрузки

Разметка HTML

У нас есть блок <header> </header>, с серым фоном, логотипом сайта и индикатором загрузки. То есть то, что пользователь видит как зашел на сайт.

Далее идет блок <div> с классом ip-main, где находится основной контент страницы.

А сейчас сам код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="ip-container" class="ip-container">
    <header class="ip-header">
        <!-- лого -->
        <div class="ip-loader">
            <svg class="ip-inner" width="60px" height="60px" viewBox="0 0 80 80">
                <path class="ip-loader-circlebg" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/>
                <path id="ip-loader-circle" class="ip-loader-circle" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/>
            </svg>
        </div>
    </header>
    <div class="ip-main">
        <!-- основной контент -->
    </div>
</div>

А сейчас давайте это всё красиво оформим!

Стили CSS

В HTML разметке ничего сложного нет. Переходим к визуальному оформлению. В зависимости от того, какое демо вам понравилось больше, вам необходимо подключить между тегами <head> </head> соответствующий файл стилей (который находится в папке css).

effect1.css если вам понравилось первое демо
effect2.css если вам понравилось второе демо

Ну а подключается всё это дело как обычно (если вам нравится первый эффект):

1

<link rel="stylesheet" type="text/css" href="css/effect1.css" />

Или так (если больше понравился второй):

1

<link rel="stylesheet" type="text/css" href="css/effect2.css" />

В начале каждого из этих файлов есть вот такие свойства:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'Blokk';
    src: url('../fonts/blokk/BLOKKRegular.eot');
    src: url('../fonts/blokk/BLOKKRegular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/blokk/BLOKKRegular.woff') format('woff'),
         url('../fonts/blokk/BLOKKRegular.svg#BLOKKRegular') format('svg');
}
 
@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'feather';
    src:url('../fonts/feather/feather.eot?-9jv4cc');
    src:url('../fonts/feather/feather.eot?#iefix-9jv4cc') format('embedded-opentype'),
        url('../fonts/feather/feather.woff?-9jv4cc') format('woff'),
        url('../fonts/feather/feather.ttf?-9jv4cc') format('truetype'),
        url('../fonts/feather/feather.svg?-9jv4cc#feather') format('svg');
}

Здесь вам необходимо указать пути к папке fonts, чтобы в дальнейшем работал индикатор загрузки.

Следующим свойством мы зафиксируем блок, в котором находится индикатор загрузки:

1
2
3
4
5
6
7
8
9

.ip-header {
    position: fixed; /* фиксированное позиционирование */
    top: 0; /* указывая 0 (ноль), мы "прижимаем" к верху этот блок */
    z-index: 100; /* позиционирование по оси Z */
    min-height: 480px; /* минимальная высота блока */
    width: 100%; /* ширина блока на всю ширину экрана */
    height: 100%; /* высота блока на всю высоту экрана */
    background: #f1f1f1; /* фоновый цвет */
}

Свойств действительно много, не буду их все описывать. Вам лишь нужно подключить файл стилей соответствующего эффекта. Вот что получается в результате:

Оформление индикатора загрузки

Функциональная часть jQuery

Чтобы всё это заработало и закрутилось нужна некая «магия» 🙂 . Но к ней мы сегодня прибегать не будем, а воспользуемся лишь несколькими скриптами (classie.js, pathLoader.js и main.js), которые можно найти в папке js.

Скрипты подключаем перед закрывающим тегом </body>:

1
2
3

<script src="js/classie.js"></script>
<script src="js/pathLoader.js"></script>
<script src="js/main.js"></script>

Вывод

Сейчас у нас всё красиво работает и страница появляется по истечению таймера в индикаторе загрузки. Вы увидели 2 эффекта загрузки страницы и можете выбирать любой свой вкус. На продающей странице, где много изображений, видео, и я не говорю о количестве скриптов, данный способ показать посетителю заранее подгруженный сайт — очень подойдет.

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

Источник

.preloader-2 {

width: auto;

height: auto;

}

.preloader-2 ul {

list-style: none;

display: grid;

grid-template-columns: repeat(5, 1fr);

animation: preloader-2-rot 16s linear infinite;

}

@keyframes preloader-2-rot {

100% {

transform: rotate(360deg);

}

}

.preloader-2 li {

width: 40px;

height: 40px;

background: #337AB7;

border-radius: 4px;

animation: preloader-2-scale 0.8s linear alternate infinite;

}

@keyframes preloader-2-scale {

100% {

transform: scale(0.1);

opacity: 0;

}

}

.preloader-2 li:nth-child(1) {

z-index: 24;

}

.preloader-2 li:nth-child(2) {

z-index: 23;

}

.preloader-2 li:nth-child(3) {

z-index: 22;

}

.preloader-2 li:nth-child(4) {

z-index: 21;

}

.preloader-2 li:nth-child(5) {

z-index: 20;

}

.preloader-2 li:nth-child(6) {

z-index: 19;

}

.preloader-2 li:nth-child(7) {

z-index: 18;

}

.preloader-2 li:nth-child(8) {

z-index: 17;

}

.preloader-2 li:nth-child(9) {

z-index: 16;

}

.preloader-2 li:nth-child(10) {

z-index: 15;

}

.preloader-2 li:nth-child(11) {

z-index: 14;

}

.preloader-2 li:nth-child(12) {

z-index: 13;

}

.preloader-2 li:nth-child(13) {

z-index: 12;

}

.preloader-2 li:nth-child(14) {

z-index: 11;

}

.preloader-2 li:nth-child(15) {

z-index: 10;

}

.preloader-2 li:nth-child(16) {

z-index: 9;

}

.preloader-2 li:nth-child(17) {

z-index: 8;

}

.preloader-2 li:nth-child(18) {

z-index: 7;

}

.preloader-2 li:nth-child(19) {

z-index: 6;

}

.preloader-2 li:nth-child(20) {

z-index: 5;

}

.preloader-2 li:nth-child(21) {

z-index: 4;

}

.preloader-2 li:nth-child(22) {

z-index: 3;

}

.preloader-2 li:nth-child(23) {

z-index: 2;

}

.preloader-2 li:nth-child(24) {

z-index: 1;

}

.preloader-2 li:nth-child(25) {

z-index: 0;

}

.preloader-2 li:nth-child(1) {

animation-delay: 0.1s;

}

.preloader-2 li:nth-child(7) {

animation-delay: 0.3s;

}

.preloader-2 li:nth-child(13) {

animation-delay: 0.5s;

}

.preloader-2 li:nth-child(19) {

animation-delay: 0.7s;

}

.preloader-2 li:nth-child(24) {

animation-delay: 0.9s;

}

.preloader-2 li:nth-child(2) {

animation-delay: 0.2s;

}

.preloader-2 li:nth-child(8) {

animation-delay: 0.4s;

}

.preloader-2 li:nth-child(14) {

animation-delay: 0.6s;

}

.preloader-2 li:nth-child(20) {

animation-delay: 0.8s;

}

.preloader-2 li:nth-child(3) {

animation-delay: 0.3s;

}

.preloader-2 li:nth-child(9) {

animation-delay: 0.5s;

}

.preloader-2 li:nth-child(15) {

animation-delay: 0.7s;

}

.preloader-2 li:nth-child(4) {

animation-delay: 0.4s;

}

.preloader-2 li:nth-child(10) {

animation-delay: 0.6s;

}

.preloader-2 li:nth-child(5) {

animation-delay: 0.5s;

}

.preloader-2 li:nth-child(1) {

animation-delay: 0.1s;

}

.preloader-2 li:nth-child(6) {

animation-delay: 0.2s;

}

.preloader-2 li:nth-child(11) {

animation-delay: 0.3s;

}

.preloader-2 li:nth-child(16) {

animation-delay: 0.4s;

}

.preloader-2 li:nth-child(21) {

animation-delay: 0.5s;

}

.preloader-2 li:nth-child(7) {

animation-delay: 0.3s;

}

.preloader-2 li:nth-child(12) {

animation-delay: 0.4s;

}

.preloader-2 li:nth-child(17) {

animation-delay: 0.5s;

}

.preloader-2 li:nth-child(22) {

animation-delay: 0.6s;

}

.preloader-2 li:nth-child(13) {

animation-delay: 0.5s;

}

.preloader-2 li:nth-child(18) {

animation-delay: 0.6s;

}

.preloader-2 li:nth-child(23) {

animation-delay: 0.7s;

}

.preloader-2 li:nth-child(19) {

animation-delay: 0.7s;

}

.preloader-2 li:nth-child(24) {

animation-delay: 0.8s;

}

.preloader-2 li:nth-child(25) {

animation-delay: 0.9s;

}

Источник

Очень красиво смотрятся сайты, в которых перед загрузкой страницы появляется анимация, например, затемнение экрана, перелистование страниц или какое-то действие. Это так называемые preload эффекты. Рассмотрим подробнее, как их организовать а своем сайте.

Более всего мне понравился «скрипт» с западного сайта. Скрипт взял в кавычки, так как jQuery здесь практически не используется — всего одна строка кода. Но зато более активно используется css и html.

Данная предзагрузка страницы работает так — перед открытием сайта появляется анимация. В это время грузятся скрипты, текст и картинки вашего сайта. После того, как все загрузится, анимация пропадет. Также, если пользователь принудительно нажмет на страницу, анимация сразу пропадет (эту опцию можно отключить). Данный способ очень полезен не только для установки на сайтах, но и в php программах, чтобы пользователь не успел нажать ничего лишнего, пока программа полностью не загрузится.

Посмотреть скрипт в действии или скачать его вы можете с помощью кнопок ниже.

Скачать скрипт

В скачанном архиве будет много файлов demo1.html — demo30.html. В каждом из которых, вы найдете код анимации. Подключите все согласно структуре одного из файлов анимации в индексный файл вашего сайта и радуйтесь красивой предзагрузке страницы.

В примерах есть мусор, поэтому рассмотрим способ правильного подключения анимации к вам на сайт. Подключите (на примере demo8):

В <head>:

  • 1. Для нормальной работы скрипта нужна jQuery библиотека. Если ее нет на вашем сайте, то подключите.
  • 2. Файл main.js можно не подключать — вместо него сразу пропишите немного измененый код:
    $(window).load(function() {
    $(«#loading»).fadeOut(500);
    $(«#loading-center»).click(function() {
    $(«#loading»).fadeOut(500);
    })
    })
  • 3. Далее потребуется style.css и весь <style> примера.

В <body>:

  • 1. Теперь после открывающего <body> подключите все содержимое тега с id loading.

Теперь, если вы все сделали правильно, перед загрузкой каждой страницы у вас будет красивая анимация.

| 2017-01-30 | Эффекты предзагрузки страниц на html и css (30 штук) | Очень красиво смотрятся сайты, в которых перед загрузкой страницы появляется анимация, например, затемнение экрана, перелистование страниц или какое-т | https://blogprogram.ru/wp-content/uploads/2016/12/526-131×131.jpg

Источник

Как использовать и стилизовать полосу загрузки в HTML5

От автора: В HTML5 появился новый элемент – progress, который работает также, как и обычная полоса загрузки (progress bar), и используется для того, чтобы визуализировать процесс выполнения определенной задачи, например, загрузки данных на сервер.

В данной статье рассматривается пример того, как добавлять подобные элементы на страницу и стилизовать их; также в данной статье показан метод изменения значений у таких элементов с помощью JavaScipt.

демо

Добавление полосы загрузки на страницу

Чтобы добавить полосу загрузки на страницу, необходимо использовать элемент progress. Значения полосы загрузки определяются с помощью атрибутов value и max. Вот пример:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<progress value=«23» max=«100»></progress>

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

Как уже было сказано, элемент progress является обычной полосой загрузки в HTML5 и, проще говоря, отображает прогресс выполнения какой-либо задачи. При этом атрибут max определяет максимальное значение, требуемое для выполнения задачи, а атрибут value определяет, сколько уже выполнено на текущий момент.

Браузерная поддержка: Chrome 8+, Firefox 16+, IE 10+, Opera 11+, Safari 6+.

Стилизация полосы загрузки

Теперь давайте определим стили для полосы загрузки, чтобы она одинаково выглядела на всех платформах. Чтобы добавить стили для элемента progress, мы просто используем селектор тега. В следующем примере мы изменяем цвет фона, убираем границы и скругляем углы у данного элемента.

progress {

  background—color: #00FEFD;

  border—radius: 10px;

  border: 0;

  height: 20px;

  width: 200px;

}

Но здесь кроется проблема, т.к. каждый браузер немного по-своему отображает данные стилевые правила:

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

В Chrome и Safari данные стили совсем не применяются, за исключением стилей с вендорным префиксом -webkit-.

Итак, в Chrome и Safari внешний вид элемента progress может быть изменен благодаря использованию псевдо-классов: -webkit-progress-bar и -webkit-progress-value. Первый из них используется для определения стилей для полосы загрузки, а второй – для индикатора загрузки (текущее значение выполняемой задачи).

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

rogress::—webkit—progress—bar {

  /* стили */

}

progress::—webkit—progress—value {

  /* стили */

}

В Firefox есть собственный псевдо-класс -moz-progress-bar, который можно использовать только для стилизации индикатора прогресса.

progress::—moz—progress—bar {

  /* стили */

}

Вот полный список всех селекторов, необходимых для стилизации элемента progress.

progress {

  /* стили */

}

progress::—webkit—progress—bar {

  /* стили */

}

progress::—webkit—progress—value {

  /* стили */

}

progress::—moz—progress—bar {

  /* стили */

}

Изменение значения полосы загрузки с помощью JavaScript

А теперь давайте рассмотрим пример использования простой полосы загрузки со следующим HTML кодом.

<progress max=«100» value=«0» id=«demo-progress-bar»></progress>

Чтобы изменить значение полосы загрузки в JavaScript, можно использовать следующий код.

document.getElementById( ‘demo-progress-bar’ ).value = 45;

Данный код изменяет значение элемента progress, id которого равен «demo-progress-bar», на 45. Вот простой JavaScript код, который изменяет значение элемента progress с 0 до 100, увеличивая значение на единицу каждые 100 миллисекунд.

var counter = 0;

function progressDemo() {

  counter++;

  document.getElementById( ‘demo-progress-bar’ ).value = counter;

  if( counter == 100 ) {

    clearInterval( timer );

  }

}

var timer = setInterval( progressDemo, 100 );

Источник: //basicuse.net/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Верстка. Быстрый старт

Практический курс по верстке адаптивного сайта с нуля!

Смотреть

Источник

В этой статье разберём процесс создания прелоадера для сайта как на чистом CSS, так и с использованием изображений.

Назначение прелоадера

Страница любого сайта или веб-приложения не загружается мгновенно. На загрузку и отображение страницы необходимо некоторое время. При этом страница при её загрузке может видоизменяться. Обычно это происходит при загрузке стилей, шрифтов, картинок. Чтобы этот не привлекательный момент скрыть от пользователя, можно на время загрузки страницы отобразить пользователю какой-нибудь анимированный прелоадер. А после того, как страница полностью загрузится его убрать. Основная цель прелоадера — это улучшить впечатление пользователя о сайте.

Как создать прелоадер страницы

На самом деле создать прелоадер очень просто.

Для этого нужно сразу после открывающего тега body добавить код (HTML структуру прелоадера). С помощью CSS его необходимо настроить так, чтобы он занимал всю область viewport и находился над содержимым страницы. В качестве прелодера обычно используют анимированную картинку (svg, gif), или CSS-анимацию.

В процессе загрузки страницы её контент находится под прелодером. Пользователь видит только анимированную картинку.

После полной загрузки прелоадер необходимо скрыть. Чтобы это осуществить необходимо написать очень маленький скрипт. Это можно выполнить как на чистом JavaScript, так и с использованием библиотеки jQuery.

Прелоадер на чистом CSS

Этапы создания прелодера на чистом CSS:

1. Добавить после открывающего тега body следующий HTML-код:

<div class="preloader">
  <div class="preloader__row">
    <div class="preloader__item"></div>
    <div class="preloader__item"></div>
  </div>
</div>

Элемент .preloader – это контейнер, который будет занимать всю область просмотра и находится над содержимым страницы. .preloader__row и .preloader__item – необходимы для создания CSS-анимации, которую отобразим в центре viewport.

2. Создать следующие стили:

.preloader {
  /*фиксированное позиционирование*/
  position: fixed;
  /* координаты положения */
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  /* фоновый цвет элемента */
  background: #e0e0e0;
  /* размещаем блок над всеми элементами на странице (это значение должно быть больше, чем у любого другого позиционированного элемента на странице) */
  z-index: 1001;
}

.preloader__row {
  position: relative;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  margin-top: -35px;
  margin-left: -35px;
  text-align: center;
  animation: preloader-rotate 2s infinite linear;
}

.preloader__item {
  position: absolute;
  display: inline-block;
  top: 0;
  background-color: #337ab7;
  border-radius: 100%;
  width: 35px;
  height: 35px;
  animation: preloader-bounce 2s infinite ease-in-out;
}

.preloader__item:last-child {
  top: auto;
  bottom: 0;
  animation-delay: -1s;
}

@keyframes preloader-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes preloader-bounce {

  0%,
  100% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }
}

.loaded_hiding .preloader {
  transition: 0.3s opacity;
  opacity: 0;
}

.loaded .preloader {
  display: none;
}

Размещение прелоадера над контентом осуществляется посредством задания ему фиксированного позиционирования и CSS-свойства z-index.

3. Вставить сценарий, который будет добавлять к элементу body класс loaded после полной загрузки страницы:

<script>
  window.onload = function () {
    document.body.classList.add('loaded');
  }
</script>

Этот скрипт очень резко скрывает прелоадер. Чтобы этот процесс улучшить, а именно выполнить это с анимацией можно использовать вместо вышеприведённого сценария этот:

<script>
  window.onload = function () {
    document.body.classList.add('loaded_hiding');
    window.setTimeout(function () {
      document.body.classList.add('loaded');
      document.body.classList.remove('loaded_hiding');
    }, 500);
  }
</script>

Демо прелоадера

Прелоадер в виде анимированной svg иконки

Процесс создания прелоадера в виде анимированной svg иконки не будет сильно отличаться от примера с использованием CSS-анимации.

1. Создадим HTML-разметку прелоадера и разместим её сразу же после открывающего тега body:

<div class="preloader">
  <svg class="preloader__image" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <path fill="currentColor"
      d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z">
    </path>
  </svg>
</div>

В качестве svg можно использовать любое другое изображение.

2. Добавим CSS:

.preloader {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  /* фоновый цвет */
  background: #e0e0e0;
  z-index: 1001;
}

.preloader__image {
  position: relative;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  margin-top: -35px;
  margin-left: -35px;
  text-align: center;
  animation: preloader-rotate 2s infinite linear;
}

@keyframes preloader-rotate {
  100% {
    transform: rotate(360deg);
  }
}

.loaded_hiding .preloader {
  transition: 0.3s opacity;
  opacity: 0;
}

.loaded .preloader {
  display: none;
}

3. Поместим на страницу следующий сценарий:

<script>
  window.onload = function () {
    document.body.classList.add('loaded_hiding');
    window.setTimeout(function () {
      document.body.classList.add('loaded');
      document.body.classList.remove('loaded_hiding');
    }, 500);
  }
</script>

Этот сценарий на чистом JavaScript. Но его можно написать с использованием библиотеки jQuery.

В этом случае он будет выглядеть следующим образом:

<script>
  $(window).on('load', function () {
    $('body').addClass('loaded_hiding');
    window.setTimeout(function () {
      $('body').addClass('loaded');
      $('body').removeClass('loaded_hiding');
    }, 500);
  }
</script>

Демо прелоадера

Пример прелоадера с градиентным фоном:

Демо прелоадера

Прелоадер с использованием анимированной gif картинки

В качестве изображения можно использовать не только svg, но и gif картинку.

HTML разметка:

<!-- Прелоадер -->
<div class="preloader">
  <div class="preloader__image"></div>
</div>

CSS для прелоадера:

.preloader {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: #fff;
  z-index: 1001;
}

.preloader__image {
  position: relative;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin-top: -32px;
  margin-left: -32px;
  background: url('preloader.gif') no-repeat 50% 50%; /*расположение (url) изображения gif и др. параметры*/
}

.loaded_hiding .preloader {
  transition: 0.3s opacity;
  opacity: 0;
}

.loaded .preloader {
  display: none;
}

Демо прелоадера

Небольшая коллекция анимированных gif-изображений имеется в этом архиве.

Вариант прелоадера с использованием jQuery функции fadeOut

Пример скрипта нв jQuery для скрытия прелоадере с использованием функции fadeOut:

$(window).on('load', function() {
  $('.preloader').fadeOut().end().delay(400).fadeOut('slow');
});

Демо прелоадера

Кнопка отправки со спиннером

Рассмотрим создание формы, работающей через AJAX. При её отправке будем переводить кнопку type="submit" в состояние disabled и показывать спиннер. Спиннер будем отображать до тех пор пока не прийдет ответ от сервера. Тем самым спиннер будет указывать что действие все ещё выполняется и оно не завершено.

1. Отправка формы с использованием XMLHttpRequest:

<style>
  @keyframes spinner-border {
    100% {
      transform: rotate(360deg);
    }
  }

  .submit-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.125em;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: .75s linear infinite spinner-border;
    animation: .75s linear infinite spinner-border;
  }

  .submit-spinner_hide {
    display: none;
  }
</style>

<!-- Форма -->
<form action="#" method="post" id="user">
  ...
  <button type="submit"><span class="submit-spinner submit-spinner_hide"></span> Отправить</button>
</form>

<script>
  function sendForm() {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', document.forms.user.action);
    xhr.responseType = 'json';
    xhr.onload = () => {
      document.forms.user.querySelector('[type="submit"]').disabled = false;
      document.forms.user.querySelector('.submit-spinner').classList.add('submit-spinner_hide');
      if (xhr.status !== 200) {
        return;
      }
      const response = xhr.response;
    }
    xhr.onerror = () => {
      document.forms.user.querySelector('[type="submit"]').disabled = false;
      document.forms.user.querySelector('.submit-spinner').classList.add('submit-spinner_hide');
    };
    document.forms.user.querySelector('[type="submit"]').disabled = true;
    document.forms.user.querySelector('.submit-spinner').classList.remove('submit-spinner_hide');
    xhr.send(new FormData(document.forms.user));
  }
  // при отправке формы
  document.forms.user.addEventListener('submit', (e) => {
    e.preventDefault();
    sendForm();
  });
</script>

2. Отправка формы с использованием Fetch:

async function sendForm() {
  try {
    document.forms.user.querySelector('[type="submit"]').disabled = true;
    document.forms.user.querySelector('.submit-spinner').classList.remove('submit-spinner_hide');
    let response = await fetch(document.forms.user.action, {
      method: 'post',
      body: new FormData(document.forms.user)
    });
    document.forms.user.querySelector('[type="submit"]').disabled = false;
    document.forms.user.querySelector('.submit-spinner').classList.add('submit-spinner_hide');
    if (response.ok) {
      let result = await response.json();
    }
  }
  catch (error) {
    document.forms.user.querySelector('[type="submit"]').disabled = false;
    document.forms.user.querySelector('.submit-spinner').classList.add('submit-spinner_hide');
    console.log(error);
  }
}
// при отправке формы
document.forms.user.addEventListener('submit', (e) => {
  e.preventDefault();
  sendForm();
});
Источник

Понравилась статья? Поделить с друзьями:

Читайте также:

  • Как изменить страницу входа геткурс
  • Как изменить страницу вк на юле
  • Как изменить страницу быстрого доступа гугл хром
  • Как изменить страницу быстрого доступа google chrome
  • Как изменить страницу блога wordpress

    • 0 0 голоса
    Рейтинг статьи
    Подписаться
    Уведомить о
    guest

    0 комментариев
    Старые
    Новые Популярные
    Межтекстовые Отзывы
    Посмотреть все комментарии