<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.25.0/css/uikit.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.25.0/css/components/dotnav.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.25.0/css/components/progress.min.css">
</head>
<body>
<div class="uk-panel uk-panel-box uk-panel-box-secondary">
<h1>Progress bar Animation</h1>
<div id="progressbar" class="uk-progress uk-progress-success">
<div class="uk-progress-bar" style="width: 0%;">0%</div>
</div>
<ul id="content" class="uk-switcher">
<li class="uk-active"><h1>1</h1></li>
<li><h1>2</h1></li>
<li><h1>3</h1></li>
<li><h1>4</h1></li>
<li><h1>5</h1></li>
</ul>
<ul class="uk-dotnav uk-flex-center small" data-uk-switcher="{connect:'#content'}">
<li class="uk-active"><a href="">...</a></li>
<li><a href="">...</a></li>
<li><a href="">...</a></li>
<li><a href="">...</a></li>
<li><a href="">...</a></li>
</ul>
</div>
<script src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.25.0/js/uikit.min.js"></script>
</body>
</html>
var bar = $("#progressbar").find(".uk-progress-bar");
var list = $("#content").find("li").length;
$('[data-uk-switcher]').on('show.uk.switcher', function(event, area){
var itemActive = $("#content").find("li.uk-active").index() + 1;
var percent = Math.floor(itemActive / list * 100);
bar.css("width", percent+"%").text(percent+"%");
});