I’ve solved it. Just put the visibility property in the element <ons-progress-bar> <!doctype html> <html lang="en" ng-app="my-app"> <head> <title>App</title> <meta charset="utf-8"> <!-- ONSENUI v2.1.0 and ANGULARJS v1.6.1 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsenui.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsen-css-components.css"/> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/onsenui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/angular-onsenui.js"></script> </head> <body> <ons-page ng-controller="ExampleController"> <ons-toolbar> <div class="left"> <ons-back-button>Atras</ons-back-button> </div> <div class="center"> Hello </div> </ons-toolbar> <ons-progress-bar id="bar" indeterminate style="visibility: hidden;"></ons-progress-bar> <div style="text-align:center"> <p><ons-input modifier="underbar" type="text" placeholder="Name" float></ons-input></p> <p><ons-button ng-click="showProgress()">Button</ons-button></p> </div> </ons-page> <script type="text/javascript"> var app = angular.module('my-app', ['onsen']); app.controller('ExampleController', function($scope) { $scope.showProgress = function(){ var element = document.getElementById("bar"); element.setAttribute("style", "visibility: visible;"); } }); </script> </body> </html>