# Hourglass indicator

**URL:** https://community.thunkable.com/t/hourglass-indicator/1959688
**Category:** Questions about Thunkable X
**Tags:** design
**Created:** [July 11, 2022, 7:07am UTC](https://community.thunkable.com/t/hourglass-indicator/1959688 "2022-07-11T07:07:04Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![Giuseppe\_Geppo\_Catta](https://avatars.discourse-cdn.com/v4/letter/g/2acd7d/32.png) [@Giuseppe\_Geppo\_Catta](https://community.thunkable.com/u/Giuseppe_Geppo_Catta)
#### Post date: [July 11, 2022, 7:07am UTC](https://community.thunkable.com/t/hourglass-indicator/1959688/1 "2022-07-11T07:07:04Z")

</div>

Is there a way to create an Hourglass indicator with thunkable?  
I was thinking of changing the dimension of an object with a coloured background ,placing in front of it an hourglass shape mask, but i don’t know if it’s possible to overlap objects and if there are other better ways.  
thank you 😉

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [July 11, 2022, 8:47am UTC](https://community.thunkable.com/t/hourglass-indicator/1959688/2 "2022-07-11T08:47:51Z")

</div>

An easier way is to find a GIF with the rotating hourglass and use it.

Check this:

> **[Graphic & Website Design](https://www.jimphicdesigns.com/downloads/download-page.php?id=15)**
>
> Professional Graphic Design and Website Design services. This includes Logo Design, Stationary Design, Social Media Design, or any other design requirements you may have. Have one-on-one discussions with an experienced designer. 24-hour turn around...

![hourglass](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/5/553cd5fcd5316f0e9b8019872b07eb77e9db18ec.gif)

Should you want to use the image, please see the notice in the website to view the terms and conditions

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/f/effbae197b24fd2fecdee989575e95dfd45ef207.png)

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [July 11, 2022, 2:35pm UTC](https://community.thunkable.com/t/hourglass-indicator/1959688/3 "2022-07-11T14:35:35Z")

</div>

Or a Lottie animation:

> **[Free Lottie Animation Files, Tools & Plugins - LottieFiles](https://lottiefiles.com/search?q=hourglass&category=animations)**
>
> The world’s largest online platform for the world’s smallest animation format for designers, developers, and more. Access Lottie animation tools and plugins for Android, iOS, and Web.

But if you need control over the hourglass contents, then you will have to build the animation yourself, frame by frame, or overlap masking shapes as you mentioned.

---

<div class="post-metadata">

### Author: ![Giuseppe\_Geppo\_Catta](https://avatars.discourse-cdn.com/v4/letter/g/2acd7d/32.png) [@Giuseppe\_Geppo\_Catta](https://community.thunkable.com/u/Giuseppe_Geppo_Catta)
#### Post date: [July 12, 2022, 2:45pm UTC](https://community.thunkable.com/t/hourglass-indicator/1959688/4 "2022-07-12T14:45:38Z")

</div>

I don’t need the image of an hourglass but to control it.  
The behaviour should be as a progression bar with hourglass shape:)  
Working with percentage it could be made by 1 hundred images but it seems more tricky than overlap a mask

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [July 12, 2022, 3:43pm UTC](https://community.thunkable.com/t/hourglass-indicator/1959688/5 "2022-07-12T15:43:43Z")

</div>

I made a quick demo of how you can achieve something close to the hourglass using blocks.

[https://x.thunkable.com/projectPage/62cd8abcbe51fe001210da7b](https://x.thunkable.com/projectPage/62cd8abcbe51fe001210da7b)

When you click on the button, it will form like a pyramid inside the column. This could be a starting point for you if I get what you mean this time.

---

<div class="post-metadata">

### Author: ![Giuseppe\_Geppo\_Catta](https://avatars.discourse-cdn.com/v4/letter/g/2acd7d/32.png) [@Giuseppe\_Geppo\_Catta](https://community.thunkable.com/u/Giuseppe_Geppo_Catta)
#### Post date: [July 13, 2022, 7:31am UTC](https://community.thunkable.com/t/hourglass-indicator/1959688/6 "2022-07-13T07:31:06Z")

</div>

Nice try, but too much related to pixel dimensions and shape.  
So there is no way to overlap two object?  
What about using canvas? Could it be a way?

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [July 13, 2022, 9:47am UTC](https://community.thunkable.com/t/hourglass-indicator/1959688/7 "2022-07-13T09:47:02Z")

</div>

> [@Giuseppe\_Geppo\_Catta](#):
>
> there is no way to overlap two object?

Yes you can overlap objects. It is possible and a lot easier in DnD.

* * *

> [@Giuseppe\_Geppo\_Catta](#):
>
> using canvas?

Yes you can use `canvas`.

* * *

Either way, it would be very difficult to help without you coming up with what you tried and a visual representation of what you want to achieve.

---

<div class="post-metadata">

### Author: ![Giuseppe\_Geppo\_Catta](https://avatars.discourse-cdn.com/v4/letter/g/2acd7d/32.png) [@Giuseppe\_Geppo\_Catta](https://community.thunkable.com/u/Giuseppe_Geppo_Catta)
#### Post date: [July 13, 2022, 2:53pm UTC](https://community.thunkable.com/t/hourglass-indicator/1959688/8 "2022-07-13T14:53:16Z")

</div>

[clessidra.zip](https://community.thunkable.com/uploads/short-url/gucIdhycJ17mHnfps4D6uv0reYH.zip) (2.3 MB)  
This is a quick example of what I would like to do.  
As you can see, there’s an hourglass shape in front of two (3 with the vertical rectangle) objects that change their dimensions.  
Hope this help to undestrand my will.  
thank you.

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)
#### Post date: [October 11, 2022, 2:53pm UTC](https://community.thunkable.com/t/hourglass-indicator/1959688/9 "2022-10-11T14:53:34Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
