Sweetalert2 javascript (progresStep) - sweetalert2

Question

So, I'm having some problem with sweetalert2 (I'm new here).
I have this script and i don't know how to make to be with progress step (see the .gif below)
Set Premium Points</li>
<script>
function givepptoplayer() {
swal({
title: 'Change User Premium Points <?php echo $data->name ?>',
input: 'number',
showCancelButton: false,
confirmButtonText: 'edit',
showLoaderOnConfirm: true,
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger m-l-10',
allowOutsideClick: false,
inputValue: '',
}).then(function (result) {
$.post('<?php echo config::$_PAGE_URL ?>api/finishthis', { 'userid' : '<?php echo $data->id ?>', 'changePP': result.value}, function(result)
{
swal({
type: 'success',
title: 'Succes!',
html: result
});
});
});
}
</script>
I want when to make a progressStep something like here: https://gyazo.com/41f65065108e3937e3afc2a3064ee028
Can you guys give me an example please?

Answer 1

There is an example of chaining modals with related code on https://sweetalert2.github.io/#chaining-modals. Basically the code is:
swal.mixin({
input: 'text',
confirmButtonText: 'Next →',
showCancelButton: true,
progressSteps: ['1', '2', '3']
}).queue([
{
title: 'Question 1',
text: 'Chaining swal2 modals is easy'
},
'Question 2',
'Question 3'
]).then((result) => {
if (result.value) {
swal({
title: 'All done!',
html:
'Your answers: <pre><code>' +
JSON.stringify(result.value) +
'</code></pre>',
confirmButtonText: 'Lovely!'
})
}
})