# Loop a timeline endlessly

**URL:** <https://forums.fusetools.com/t/loop-a-timeline-endlessly/4817>\
**Category:** How-to Discussions\
**Created:** [December 4, 2015, 1:33pm UTC](https://forums.fusetools.com/t/loop-a-timeline-endlessly/4817 "2015-12-04T13:33:25Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Enguerran\_Henniart](https://avatars.discourse-cdn.com/v4/letter/e/13edae/32.png) [@Enguerran\_Henniart](https://forums.fusetools.com/u/Enguerran_Henniart)\
**Post date:** [December 4, 2015, 1:33pm UTC](https://forums.fusetools.com/t/loop-a-timeline-endlessly/4817/1 "2015-12-04T13:33:25Z")

</div>

Hi !

How could I play a timeline endlessly ? When it’s finished, it’s launched again from the beginning. Like a complex `Cycle`.

Thanks !

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [December 4, 2015, 4:55pm UTC](https://forums.fusetools.com/t/loop-a-timeline-endlessly/4817/2 "2015-12-04T16:55:28Z")

</div>

Unfortunately this can’t be done yet. It’s one of our pending feature requests and I’m looking to increase the priority of it now.

Just to be clear though, you wish to have wraparound support. When it gets to the end it starts playing from the start again?

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [December 4, 2015, 4:59pm UTC](https://forums.fusetools.com/t/loop-a-timeline-endlessly/4817/3 "2015-12-04T16:59:20Z")

</div>

While we’re at it, perhaps support (optional) start- and end-markers as well?

---

<div class="post-metadata">

**Author:** ![Enguerran\_Henniart](https://avatars.discourse-cdn.com/v4/letter/e/13edae/32.png) [@Enguerran\_Henniart](https://forums.fusetools.com/u/Enguerran_Henniart)\
**Post date:** [December 4, 2015, 5:00pm UTC](https://forums.fusetools.com/t/loop-a-timeline-endlessly/4817/4 "2015-12-04T17:00:36Z")

</div>

Hmm I’m not sure I understand well the question, the idea is just to be able to loop a complex animation.

Whether `<LoopTimeline>` automatically running again or `<Timeline Loop="True">` or just an easy way to put the `TargetProgress` back to 0 then to 1.

---

<div class="post-metadata">

**Author:** ![SvenWS](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/svenws/32/325_2.png) [@SvenWS](https://forums.fusetools.com/u/SvenWS)\
**Post date:** [August 16, 2017, 7:56pm UTC](https://forums.fusetools.com/t/loop-a-timeline-endlessly/4817/5 "2017-08-16T19:56:08Z")

</div>

Ok, whats the current state?  
I like to create a round button with endless loop like this:

> **[PURE CSS PULSE BUTTON](https://codepen.io/wifeo/pen/KwdXwV)**
>
> ...

---

<div class="post-metadata">

**Author:** ![SvenWS](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/svenws/32/325_2.png) [@SvenWS](https://forums.fusetools.com/u/SvenWS)\
**Post date:** [August 16, 2017, 8:16pm UTC](https://forums.fusetools.com/t/loop-a-timeline-endlessly/4817/6 "2017-08-16T20:16:33Z")

</div>

I found the solution:

PlayMode=“Wrap”

---

<div class="post-metadata">

**Author:** ![SvenWS](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/svenws/32/325_2.png) [@SvenWS](https://forums.fusetools.com/u/SvenWS)\
**Post date:** [August 16, 2017, 8:27pm UTC](https://forums.fusetools.com/t/loop-a-timeline-endlessly/4817/7 "2017-08-16T20:27:07Z")

</div>

Here it is:

```
<Circle ux:Class="RoundButton" HitTestMode="LocalBounds" InnerColor="#232323">
    <string ux:Property="Text" />
    <float4 ux:Property="TextColor" />
    <float4 ux:Property="InnerColor" />
    <object ux:Property="Font" />
    <float ux:Property="FontSize" />
    <EnteringAnimation>
        <Set timeline.TargetProgress="1" />
    </EnteringAnimation>           
    <Text ux:Name="txtCaption" Value="{ReadProperty Text}" Color="{ReadProperty TextColor}" Alignment="Center" Font="{ReadProperty Font}" FontSize="{ReadProperty FontSize}" />
    <Circle Color="{ReadProperty InnerColor}" Margin="10"/>
    <Circle ux:Name="cirBorder" Width="0" Height="0" >
        <Stroke Width="15">
            <SolidColor Color="{ReadProperty InnerColor}" />
        </Stroke>
    </Circle>
    <Timeline ux:Name="timeline" PlayMode="Wrap">
        <Change Target="cirBorder.Width">
            <Keyframe Value="0" Time="0.0"/>
            <Keyframe Value="60" Time="1.0"/>
        </Change>
        <Change Target="cirBorder.Height">
            <Keyframe Value="0" Time="0.0"/>
            <Keyframe Value="60" Time="1.0"/>
        </Change>
        <Change Target="cirBorder.Opacity">
            <Keyframe Value="1.0" Time="0.0"/>
            <Keyframe Value="0.0" Time="1.0"/>
        </Change>

    </Timeline>
</Circle>
```