# Creating a loading animation
**URL:** https://discourse.processing.org/t/creating-a-loading-animation/26422
**Category:** Coding Questions
**Created:** [December 21, 2020, 5:24pm UTC](https://discourse.processing.org/t/creating-a-loading-animation/26422 "2020-12-21T17:24:46Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@edumanilha](https://discourse.processing.org/u/edumanilha)
#### Post date: [December 21, 2020, 5:24pm UTC](https://discourse.processing.org/t/creating-a-loading-animation/26422/1 "2020-12-21T17:24:46Z")
I need help to make a loading bar…When i click the mouse over the button the message come with 100% and filled bar…How can I make it charge a percent after X seconds?
And how I can go back to the buttons screens after the loading message and bar?
Thanks in advance guys!
```auto
void mouseClicked(){
if mouseX>340 && mouseX <390 && mouseY > 45 && mouseY < 95){
for (int i=0; i < 101; i = i+1){
background(0);
textSize(30);
text("washing" + i + "%", 480/4,320/2.5);
rect(480/4,320/2,i*2,20,7);
}
}
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [December 21, 2020, 7:18pm UTC](https://discourse.processing.org/t/creating-a-loading-animation/26422/2 "2020-12-21T19:18:25Z")
An for-loop is not visible as an animation.
Instead get rid of the for loop and use the fact that draw loops automatically
Increase i here
Don’t use it in mouseclicked, use it in draw()
---
### Author:  [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)
#### Post date: [December 21, 2020, 7:26pm UTC](https://discourse.processing.org/t/creating-a-loading-animation/26422/3 "2020-12-21T19:26:41Z")
Here is a simple program I made. Try it!
Try adapting it to your own code
It is blured if you don’t want to see it.
```auto
void setup() {
size(600,600);
}
void draw() {
background(0);
fill(255);
int a = 0;
for(a = 0; a < frameCount && a < 100; a++) {
ellipse(10 + a * 5, 30, 3, 3);
}
text("loading: " + a,300,50);
}
```
edit it is a program meant for only that purpose. If you want it to work on command you should change a few things
---
### Author:  [@edumanilha](https://discourse.processing.org/u/edumanilha)
#### Post date: [December 21, 2020, 7:32pm UTC](https://discourse.processing.org/t/creating-a-loading-animation/26422/4 "2020-12-21T19:32:59Z")
Thanks for your reply! When I tried to use in draw, I used mousePressed, because I need to show the loading after a buton is pressed… but the animation only works when holding…
When I try to put that part inside draw:
```auto
background(0);
textSize(30);
text("washing" + i + "%", 480/4,320/2.5);
rect(480/4,320/2,i*2,20,7);
```
It shows up the loading animation more than 100% (1 by 1) because I set no limit, but when I try to put a while, to limit by 100% or a if to detect the button press, the full bar and 100% message show on the screen not loading 1 by 1…
---
### Author:  [@edumanilha](https://discourse.processing.org/u/edumanilha)
#### Post date: [December 21, 2020, 7:34pm UTC](https://discourse.processing.org/t/creating-a-loading-animation/26422/5 "2020-12-21T19:34:34Z")
I’ll try man! thanks! Any chance you can help me to trigger clicking a button? I’m having trouble with the conditons.
---
### Author:  [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)
#### Post date: [December 21, 2020, 7:47pm UTC](https://discourse.processing.org/t/creating-a-loading-animation/26422/6 "2020-12-21T19:47:40Z")
```auto
void mousePressed() {
if(dist( mouseX, mouseY, buttonX, buttonY) < buttonSize/2) {
callFunction()
}
}
```
rectMode(CORNER)
```auto
void mousePressed() {
if( mouseX > bx && mouseX < bx + bw && mouseY > by && mouseY < by + h ) {
callFunction()
}
}
```
---
### Author:  [@edumanilha](https://discourse.processing.org/u/edumanilha)
#### Post date: [December 21, 2020, 8:09pm UTC](https://discourse.processing.org/t/creating-a-loading-animation/26422/7 "2020-12-21T20:09:23Z")
I did it by putting a if inside draw, and a mouseclicked that set a value to enter the if inside the draw! when i reach 100% the value come back to 0 and the if stop working! Thanks!
---
### Author:  [@edumanilha](https://discourse.processing.org/u/edumanilha)
#### Post date: [December 21, 2020, 8:10pm UTC](https://discourse.processing.org/t/creating-a-loading-animation/26422/8 "2020-12-21T20:10:21Z")
thanks man, I’ll study your code! thanks again for the suport!
---
### Author:  [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)
#### Post date: [December 21, 2020, 8:13pm UTC](https://discourse.processing.org/t/creating-a-loading-animation/26422/9 "2020-12-21T20:13:18Z")
No problem : P, happy to help