# How to stop loading indicator

**URL:** <https://forums.fusetools.com/t/how-to-stop-loading-indicator/4523>\
**Category:** How-to Discussions\
**Created:** [December 6, 2017, 11:38pm UTC](https://forums.fusetools.com/t/how-to-stop-loading-indicator/4523 "2017-12-06T23:38:37Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![webpro](https://avatars.discourse-cdn.com/v4/letter/w/e47774/32.png) [@webpro](https://forums.fusetools.com/u/webpro)\
**Post date:** [December 6, 2017, 11:38pm UTC](https://forums.fusetools.com/t/how-to-stop-loading-indicator/4523/1 "2017-12-06T23:38:37Z")

</div>

I want to display loading indicator while app is fetching data and then disappear after a few seconds as set in the JavaScript code. But the indicator would not disappear. Can someone show me what I am missing?

```
<JavaScript>
       exports.startLoading = function() {
	    isBusy.activate();
	    setTimeout(function() {
	    isBusy.deactivate();
	}, 4000);
};
</JavaScript>
<Panel ux:Class="MyLoadingIndicator" ThemeColor="#FF5061">
	<float4 ux:Property="ThemeColor" />
	 <Circle ux:Name="rotatingStroke" Width="50" Height="50" StartAngleDegrees="-45" EndAngleDegrees="45">
		<Stroke Width="2" Color="{ReadProperty ThemeColor}" />
	</Circle>
	<Circle Color="{ReadProperty ThemeColor}" Width="20" Height="20">
		<Timeline ux:Name="myTimeline">
			<Scale Factor=".5" Duration=".25" Easing="CircularOut" EasingBack="CircularIn" />
			<Scale Factor="2" Duration=".25" Delay=".25" Easing="BounceOut" EasingBack="BounceIn" />
		</Timeline>
	</Circle>
	<WhileFalse>
		<Cycle Target="myTimeline.TargetProgress" Low="0" High="1" Frequency=".5" />
		<Spin Target="rotatingStroke" Frequency="1" />
	</WhileFalse>
</Panel>

<WhileFalse>
	<Callback Handler="{startLoading}"/>
	<Busy ux:Name="isBusy" IsActive="true" />
	<WhileBusy>
		<Change loadingPanel.Opacity="1" Duration=".4" />
	</WhileBusy>
	<MyLoadingIndicator ux:Name="loadingPanel" Opacity="0" ThemeColor="#FF5061" />
</WhileFalse>

```

---

<div class="post-metadata">

**Author:** ![Enrico](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/enrico/32/144_2.png) [@Enrico](https://forums.fusetools.com/u/Enrico)\
**Post date:** [December 7, 2017, 7:10am UTC](https://forums.fusetools.com/t/how-to-stop-loading-indicator/4523/2 "2017-12-07T07:10:37Z")

</div>

Change the `WhileFalse` part with the following:

```
<WhileBusy>
    <Change loadingPanel.Opacity="0.6" Duration=".4" />
</WhileBusy>
<LoadingIndicator ux:Name="loadingPanel" Opacity="0" ThemeColor="LoadingIndicator.Color" />

<!-- Your page -->
<Panel>
    <StackPanel Alignment="Center" >
        <Text Value="Page content" />
    </StackPanel>
    <Busy ux:Name="isBusy" IsActive="false" />
    <Activated Handler="{startLoading}"/>
</Panel>

```

If you are showing the loading indicator in a splash page and then want to go to an other page, let’s say `Home`, you should add to the Javascript part:

```
setTimeout(function() {
    isBusy.deactivate();
    router.goto("home");
}, 3000);

```

P.S. You should post this kind of questions in the _How-to discussions_ forum. You will get better and fast answers.

---

<div class="post-metadata">

**Author:** ![webpro](https://avatars.discourse-cdn.com/v4/letter/w/e47774/32.png) [@webpro](https://forums.fusetools.com/u/webpro)\
**Post date:** [December 7, 2017, 10:51am UTC](https://forums.fusetools.com/t/how-to-stop-loading-indicator/4523/3 "2017-12-07T10:51:43Z")

</div>

It worked. Thanks