Show loading icon when saving form
| File | Folder Link |
|---|---|
| form.php | \\SYNAS\Allan\DOCUMENTATION\Component\Loading Icon (For Form)\rckuc\wolf\app\views\option |
| style.css | \\SYNAS\Allan\DOCUMENTATION\Component\Loading Icon (For Form)\rckuc\wolf\admin\themes\black_and_white |
| option.js | \\SYNAS\Allan\DOCUMENTATION\Component\Loading Icon (For Form)\rckuc\wolf\admin\javascript |
Update: form.php (or your create.php and view.php)
Update your save button and add a loader inside
<div id="button_container">
<p class="buttons">
<input class="button" name="commit" type="submit" accesskey="s" value="<?php echo __('Save & Back'); ?>" />
<input class="button" name="continue" type="submit" accesskey="e" value="<?php echo __('Save and Continue Editing'); ?>" />
<?php echo __('or'); ?> <a href="<?php echo get_url('option'); ?>"><?php echo __('Cancel'); ?></a>
</p>
<span id="loader_container">
<div id="save_loader"></div>
Saving
</span>
</div>
<div id="button_container">
<p class="buttons">
<input class="button" name="commit" type="submit" accesskey="s" value="<?php echo __('Save & Back'); ?>" />
<input class="button" name="continue" type="submit" accesskey="e" value="<?php echo __('Save and Continue Editing'); ?>" />
<?php echo __('or'); ?> <a href="<?php echo get_url('option'); ?>"><?php echo __('Cancel'); ?></a>
</p>
<span id="loader_container">
<div id="save_loader"></div>
Saving
</span>
</div>Update: style.css
p.buttons {
margin: 1rem 0;
}
#button_container {
display: flex;
align-items: center;
}
#save_loader {
border: 0.1rem solid white;
animation: spin .5s linear infinite;
border-top: 0.1rem solid black;
border-left: 0.1rem solid black;
border-radius: 50%;
width: 1rem;
height: 1rem;
margin: 0.5rem;
}
#loader_container {
display: none;
align-items: center;
}
p.buttons {
margin: 1rem 0;
}
#button_container {
display: flex;
align-items: center;
}
#save_loader {
border: 0.1rem solid white;
animation: spin .5s linear infinite;
border-top: 0.1rem solid black;
border-left: 0.1rem solid black;
border-radius: 50%;
width: 1rem;
height: 1rem;
margin: 0.5rem;
}
#loader_container {
display: none;
align-items: center;
}Update: option.js (or any module js file)
$("form").on("submit", function() {
$("#loader_container").css("display", "flex");
})
$("form").on("submit", function() {
$("#loader_container").css("display", "flex");
})