Помогите с добавлением gif для запуска при отправке.

Я хотел бы добавить «gif», который будет запускаться при отправке, чтобы отправитель знал, что что-то происходит, пока страница не будет перенаправлена. Можете ли вы помочь мне добавить код для этого? Я считаю, что кнопка «Отправить» находится в строке 90. Спасибо.

 <div class="wo_about_wrapper_parent">


<div class="wo_about_wrapper">


<div class="hero hero-overlay" style="background-color: #d84c47;">


<div class="container">


<h1 class="text-center">{{LANG upload_new_video}}</h1>


</div>


</div>


<svg id="wave" viewBox="0 0 100 15"><path fill="#d84c47" opacity="0.5" d="M0 30 V15 Q30 3 60 15 V30z"></path><path fill="#d84c47" d="M0 30 V12 Q30 17 55 12 T100 11 V30z"></path></svg>


</div>


</div>


<div class="col-md-2"></div>


<div class="col-md-8 pt_page_margin">


<div class="content pt_shadow">


<div class="col-md-12 pt_upload_vdo">


<?php if ($pt->user->admin == 1) { ?>


<div class="alert alert-warning">


<h4>Just admins can see this message</h4>






<p>Note: Your server max upload size is: <?php echo ini_get('upload_max_filesize')?>, means you can't upload files that are larger than: <?php echo ini_get('upload_max_filesize')?><br><br> If you want to increase the limit or If you can't upload large files, go to Admin Settings > Settings > Site Settings > Max upload size and increase the value, if you still can't upload large files, please contact your host provider and let them increase the upload limit and max_execution_time.</p>


</div>


<?php } ?>


<div class="upload" onclick="PT_OpenUploadForm();" data-block="video-drop-zone">


<div>






<svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="[URL='https://lumtu.com/yti/dwccwdmdodHRwOi8vdzMub3JnLzIwMDAvDMw']http://www.w3.org/2000/svg[/URL]" class="feather feather-upload"><path d="M14,13V17H10V13H7L12,8L17,13M19.35,10.03C18.67,6.59 15.64,4 12,4C9.11,4 6.6,5.64 5.35,8.03C2.34,8.36 0,10.9 0,14A6,6 0 0,0 6,20H19A5,5 0 0,0 24,15C24,12.36 21.95,10.22 19.35,10.03Z" /></svg>


<h4>{{LANG darg_drop_video}}</h4>


<p>{{LANG or}} {{LANG click_2choose_file}}</p>


<button class="btn btn-main">{{LANG upload}}</button>


</div>


</div>


<div class="progress hidden">


<span class="percent">0%</span>


<div class="progress_bar_parent">


<div class="bar upload-progress-bar progress-bar active"></div>


</div>


<div class="clear"></div>


<div class="text-center pt_prcs_vdo"></div>


</div>


<form action="" method="POST" id="upload-video" class="hidden">


<input type="file" name="video" accept="video/*" class="upload-video-file">


</form>


<div class="col-md-12 hidden" id="upload-form">


<form action="" class="form-horizontal setting-panel pt_forms" method="POST">


<div class="form-group">


<label class="col-md-12" for="title">{{LANG video_title}}</label>


<div class="col-md-12">


<input id="title" name="title" type="text" placeholder="" class="form-control input-md">


<span class="help-block">{{LANG video_title_help}}</span>


</div>


</div>


<div class="form-group">


<label class="col-md-12" for="description">{{LANG video_descritpion}}</label>


<div class="col-md-12">


<textarea name="description" id="description" cols="30" rows="5" class="form-control"></textarea>


</div>


</div>


<div class="form-group">


<label class="col-md-12" for="category_id">{{LANG category}}</label>


<div class="col-md-12">


<select name="category_id" id="category_id" class="form-control">


<?php foreach($pt->categories as $key => $category) {?>


<option value="<?php echo $key?>"><?php echo $category?></option>


<?php } ?>


</select>


</div>


</div>


<div class="form-group">


<label class="col-md-12" for="tags">{{LANG tags}}</label>


<div class="col-md-12">


<input id="mySingleFieldTags" name="tags" type="text" placeholder="" class="form-control input-md">


<span class="help-block">{{LANG tags_help}}</span>


</div>


</div>


<div class="form-group">


<label class="col-md-12" for="thumbnail">{{LANG thumbnail}}</label>


<div class="col-md-12">


<div class="upload-product-image pull-left" onclick="document.getElementById('thumbnail').click(); return false">


<div class="upload-image-content">






<svg xmlns="[URL='https://lumtu.com/yti/dwccwdmdodHRwOi8vdzMub3JnLzIwMDAvDMw']http://www.w3.org/2000/svg[/URL]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-camera"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>


</div>


</div>


<div style="overflow-x: auto;width: calc(100% - 112px);">


<div id="productimage-holder"></div>


</div>


<input id="thumbnail" name="thumbnail" type="file" class="hidden" accept="image/*">


<span class="help-block">jpg, png, gif</span>


</div>


</div>


<div class="last-sett-btn modal-footer" style="margin: 0px -40px -10px -40px;">






<button type="submit" id="submit-btn" class="btn btn-main setting-panel-mdbtn" disabled><svg xmlns='[URL='https://lumtu.com/yti/dwccwdmdodHRwOi8vdzMub3JnLzIwMDAvDMw']http://www.w3.org/2000/svg[/URL]' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check-circle'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'></path><polyline points='22 4 12 14.01 9 11.01'></polyline></svg> {{LANG publish}}</button>


</div>


<input type="hidden" name="video-location" id="video-location" value="">


</form>


</div>


<div class="clear"></div>


</div>


<div class="clear"></div>


</div>


</div>


<div class="col-md-2"></div>


<script>


$(document).ready(function() {


$("#thumbnail").on('change', function() {


//Get count of selected files


var product_countFiles = $(this)[0].files.length;


var product_imgPath = $(this)[0].value;


var extn = product_imgPath.substring(product_imgPath.lastIndexOf('.') + 1).toLowerCase();


var product_image_holder = $("#productimage-holder");


product_image_holder.empty();


if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {


if (typeof(FileReader) != "undefined") {


//loop for each file selected for uploaded.


for (var i = 0; i < product_countFiles; i++)


{


var product_reader = new FileReader();


product_reader.onload = function(e) {


$("<img />", {


"src": e.target.result,


"class": "thumb-image"


}).appendTo(product_image_holder);


}


product_image_holder.show();


product_reader.readAsDataURL($(this)[0].files[i]);


}


} else {


product_image_holder.html("<p>This browser does not support FileReader.</p>");


}


}


});


});


$(function () {


$("#mySingleFieldTags").tagit({


allowSpaces: true


});


var bar = $('.bar');


var percent = $('.percent');


var prcsvdo = $('.pt_prcs_vdo');


var is_uploaded = false;


var video_drop_block = $("[data-block='video-drop-zone']");


if (typeof(window.FileReader)){


video_drop_block[0].ondragover = function() {


video_drop_block.addClass('hover');


return false;


};


video_drop_block[0].ondragleave = function() {


video_drop_block.removeClass('hover');


return false;


};


video_drop_block[0].ondrop = function(event) {


event.preventDefault();


video_drop_block.removeClass('hover');


var file = event.dataTransfer.files;


$('#upload-video').find('input').prop('files', file);


};


}


$('#upload-video').submit(function(event) {


let file_size = $(".upload-video-file").prop('files')[0].size;


if (file_size > "{{CONFIG max_upload}}") {


swal({


title: '{{LANG error}}',


text: "{{LANG file_is_too_big}} <?php echo pt_size_format($pt->config->max_upload); ?>",


type: 'error',


confirmButtonColor: '#3085d6',


cancelButtonColor: '#d33',


confirmButtonText: 'OK',


buttonsStyling: true,


confirmButtonClass: 'btn btn-success',


}).then(function(){


swal.close();


$('.upload-video-file').val('');


},


function() {


swal.close();


$('.upload-video-file').val('');


});


return false;


}


else{


var filename = $('.upload').val().split('\\').pop();


$('#title').val(filename);


$('#upload-form').removeClass('hidden');


$('.upload').addClass('hidden');


}


});


$('#upload-video').ajaxForm({


url: '{{LINK aj/upload-video}}?hash=' + $('.main_session').val(),


dataType:'json',


beforeSend: function() {


$('.progress').removeClass('hidden');


var percentVal = '0%';


bar.width(percentVal);


percent.html(percentVal);


},


uploadProgress: function(event, position, total, percentComplete) {


if(percentComplete > 50) {


percent.addClass('white');


}


var percentVal = percentComplete + '%';


bar.width(percentVal);


percent.html(percentVal);


if (percentComplete == 100) {






prcsvdo.html('<svg width="30" height="10" viewBox="0 0 120 30" xmlns="[URL='https://lumtu.com/yti/dwccwdmdodHRwOi8vdzMub3JnLzIwMDAvDMw']http://www.w3.org/2000/svg[/URL]" fill="#000"><circle cx="15" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite" /><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite" /></circle><circle cx="60" cy="15" r="9" fill-opacity="0.3"><animate attributeName="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcMode="linear" repeatCount="indefinite" /><animate attributeName="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcMode="linear" repeatCount="indefinite" /></circle><circle cx="105" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite" /><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite" /></circle></svg> {{LANG porcessing_video}}');


$('.progress').find('.bar').removeClass('upload-progress-bar');


}


},


success: function(data) {


percentVal = '0%';


bar.width(percentVal);


$('.progress').addClass('hidden');


if (data.status == 200) {


$('#video-location').val(data.file_path);


Snackbar.show({text: '<i class="fa fa-check"></i> ' + data.file_name + ' {{LANG successfully_uplaoded}}'});


$('#submit-btn').attr('disabled', false);


$('.upload-video-file').val('');


$('#title').val(data.file_name);


}


else if(data.status == 401){


swal({


title: '{{LANG oops}}!',


text: "{{LANG upload_limit_reached}}!",


type: 'info',


showCancelButton: true,


confirmButtonColor: '#3085d6',


cancelButtonColor: '#d33',


confirmButtonText: '{{LANG upgrade_now}}',


cancelButtonText: '{{LANG cancel}}',


confirmButtonClass: 'btn btn-success margin-right',


cancelButtonClass: 'btn',


buttonsStyling: false


}).then(function(){


//Go pro


window.location.href = '{{LINK go_pro}}';


},


function() {


window.location.href = '{{LINK }}';


});


}


else if(data.status == 402){


swal({


title: '{{LANG error}}',


text: data.message,


type: 'error',


confirmButtonColor: '#3085d6',


cancelButtonColor: '#d33',


confirmButtonText: 'OK',


buttonsStyling: true,


confirmButtonClass: 'btn btn-success',


}).then(function(){


swal.close();


$('.upload-video-file').val('');


},


function() {


swal.close();


$('.upload-video-file').val('');


});


}


else {


Snackbar.show({showAction: false,backgroundColor: '#e22e40',text: '<div>'+ data.error +'</div>'});


}


}


});


$('#upload-form form').ajaxForm({


url: '{{LINK aj/submit-video}}?hash=' + $('.main_session').val(),


beforeSend: function() {


$('#submit-btn').attr('disabled', true);


$('#submit-btn').val("{{LANG please_wait}}");


},


success: function(data) {


if (data.status == 200) {


window.location.href = data.link;


}


else if(data.status == 402){


swal({


title: '{{LANG error}}',


text: data.message,


type: 'error',


confirmButtonColor: '#3085d6',


cancelButtonColor: '#d33',


confirmButtonText: 'OK',


buttonsStyling: true,


confirmButtonClass: 'btn btn-success',


}).then(function(){


window.location.href = '{{LINK upload-video}}';


},


function() {


window.location.href = '{{LINK }}';


});


}


else {


$('#submit-btn').attr('disabled', false);


$('#submit-btn').val('{{LANG publish}}');


Snackbar.show({text: '<div>'+ data.message +'</div>'});


}


}


});


$('.upload-video-file').on('change', function() {


$('#upload-video').submit();


});


});


function PT_OpenUploadForm() {


$('#upload-video').find('input').trigger('click');


}


</script>


<style>.upload-s3-progressing{background: #4c9dd3;}</style>

PHP:

Это можно объяснить отсутствием правильной семантики, бесконечным бессмысленным DIV впустую, бесконечными бессмысленными классами впустую, статическими скриптами в разметке, очисткой div, как будто это еще 2003 год, отсутствием изящной деградации.

признаками умственного ослабления, которое это буткрап и jQuery.

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

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

... еще один случай, когда я бы посоветовал выбросить весь этот беспорядок в мусор и начать все сначала БЕЗ рамок с приманкой для хищников-нубов.

Подход будет заключаться в том, что вы загружаете промежуточную страницу или результаты загружаются через ajax после обработки. Меня больше интересует, почему это так медленно, вам нужно добавить трюк - они загружают файлы? Вы всегда можете отправить форму через jquery, и тогда у нее будет удобная небольшая функция, которая запускается при запуске любого процесса jquery, и вы можете использовать ее для запуска gif.