The problem here is the class col-auto, a class with no-dimention and IE11 can't "understand" how big is your "#progress" bar. You could remove that class using a fixed one: col, col-1, col-2, col-3... whatever you want and you'll see that also IE11 will begin to work.
I know, your next question will be "But why Chrome and Firefox work?" 'cause IE11 have several limitation using flexbox (https://caniuse.com/#search=flexbox) so you have to help him to understand what you really want 'cause sometimes... he is a completly bullheaded! :D :D :D
BTW, it is not a big problem here. Knowing his limitations, you can achieve your result trying another ways. In this particular case, I really don't know what you are trying to do, but I can post you some exemple to help you to find a solution.
For exemple, Do you want a 100% progress bar? Good, use col
$(document).ready(function() {
$("#progress").progressbar({
value: 50
});
});
#progress {
height: 10px;
}
#progress .ui-progressbar-value {
background: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<div class="container-fluid vertical-center">
<div class="row justify-content-center task">
<div class="col stop-align-center">
<!-- ^^^^ change here!-->
<div class="row">
<div class="col">
<form>
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
</form>
</div>
</div>
<div class="row" id="wrapper">
<div class="col">
<div class="row"> <!-- not unnecessary because in production there are more rows in parent col! -->
<div class="col">
<div id="progress"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Or maybe do you prefer a well centered form similar to your exemple? Excellent, use a smaller col-4:
$(document).ready(function() {
$("#progress").progressbar({
value: 50
});
});
#progress {
height: 10px;
}
#progress .ui-progressbar-value {
background: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<div class="container-fluid vertical-center">
<div class="row justify-content-center task">
<div class="col-4 stop-align-center">
<!-- ^^^^ change here!-->
<div class="row">
<div class="col">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
</div>
</div>
<div class="row" id="wrapper">
<div class="col">
<div class="row"> <!-- not unnecessary because in production there are more rows in parent col! -->
<div class="col">
<div id="progress"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
... and so on. Play with those classes and, in this work, always remember: Help IE11... or, more in general, help Explorer to understand what you really want! ;)
Seriously, hope it helps.
Cheers!
EDIT 1
Trying to copy your image: https://i.stack.imgur.com/fTcRy.png I wrote this. Remember, use a col-* for your progressbar. It is all centered vertically and horizontaly. And it works well also with IE11 ;)
$(document).ready(function() {
$("#progress").progressbar({
value: 50
});
});
body{
height: 100vh;
display: flex;
align-items: center;
}
#progress {
height: 10px;
}
#progress .ui-progressbar-value {
background: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<body>
<div class="container">
<div class="row">
<div class="col">
content
</div>
<div class="col">
content
</div>
<div class="col">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
<div id="progress" class="mb-3"></div>
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
</div>
</body>
