# How to change Topic progress

**URL:** https://meta.discourse.org/t/how-to-change-topic-progress/88225
**Category:** Development
**Created:** [5월 23, 2018, 9:24오전 UTC](https://meta.discourse.org/t/how-to-change-topic-progress/88225 "2018-05-23T09:24:31Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![keyboardstaff](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/keyboardstaff/32/119694_2.png) [@keyboardstaff](https://meta.discourse.org/u/keyboardstaff)
#### Post date: [5월 23, 2018, 9:24오전 UTC](https://meta.discourse.org/t/how-to-change-topic-progress/88225/1 "2018-05-23T09:24:31Z")

</div>

Hi! Ask how to change the time bar of this post to this style?

 ![image](https://global.discourse-cdn.com/meta/original/3X/b/a/ba141d59d964a4dfb218f25c39bfa10da008841a.png)

```
import tn from 'discourse/components/topic-navigation';

export default {
  name: 'always-mobile-timeline',
  initialize: function(){

    /* This is mostly the same code as in the current _performCheckSize()
       function, but "forced" to use the mobile-style indicator and pop-up
       timeline menu rather than the floating one. 
  
       This code will need to be updated any time the topic-navigation
       component in Discourse receives major changes.
    */
    tn.reopen({
      _performCheckSize() {
        if (!this.element || this.isDestroying || this.isDestroyed) { return; }

        let info = this.get('info');

        if (info.get('topicProgressExpanded')) {

          info.setProperties({
            renderTimeline: true,
            renderAdminMenuButton: true
          });

        } else {
          info.setProperties({
            renderTimeline: false,
            renderAdminMenuButton: true
          });
        }
      }
    });

  }
};

```

I tried the above code, but the style came out like this.

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/9/e9ebbc606ce0eb2d3bb44996b88c230818ad1f01.png)