More

Demo styling 
<div class="row">
        <div class="col-12">
            <div class="margin-bottom-md text-center load-more">
                <div class="margin-bottom-sm">Show 25 of 100 articles</div>
                <div class="margin-bottom-md load-more__progress">
                    <div class="load-more__indicator" style="width: 25%">
                    </div>
                </div>
                <a href="#" class="btn btn--primary">
                    Load more articles
                    <svg id="icon--arrow-down" class="margin-left-md" width="11" height="13" viewBox="0 0 11 13">
                        <g fill="none" fill-rule="evenodd">
                            <path fill="currentColor" d="M0 4H12V5H0z" transform="translate(-145 -109) rotate(90 23 132)" />
                            <path stroke="currentColor" d="M5 2L9.5 7 14 2" transform="translate(-145 -109) rotate(90 23 132) rotate(-90 9.5 4.5)" />
                        </g>
                    </svg>
                </a>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="margin-bottom-md text-center load-more">
                <div class="margin-bottom-sm">Show 50 of 100 articles</div>
                <div class="margin-bottom-md load-more__progress">
                    <div class="load-more__indicator" style="width: 50%">
                    </div>
                </div>
                <a href="#" class="btn btn--primary">
                    Load more articles
                    <svg id="icon--arrow-down" class="margin-left-md" width="11" height="13" viewBox="0 0 11 13">
                        <g fill="none" fill-rule="evenodd">
                            <path fill="currentColor" d="M0 4H12V5H0z" transform="translate(-145 -109) rotate(90 23 132)" />
                            <path stroke="currentColor" d="M5 2L9.5 7 14 2" transform="translate(-145 -109) rotate(90 23 132) rotate(-90 9.5 4.5)" />
                        </g>
                    </svg>
                </a>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="margin-bottom-md text-center load-more">
                <div class="margin-bottom-sm">Show 75 of 100 articles</div>
                <div class="margin-bottom-md load-more__progress">
                    <div class="load-more__indicator" style="width: 75%">
                    </div>
                </div>
                <a href="#" class="btn btn--primary">
                    Load more articles
                    <svg id="icon--arrow-down" class="margin-left-md" width="11" height="13" viewBox="0 0 11 13">
                        <g fill="none" fill-rule="evenodd">
                            <path fill="currentColor" d="M0 4H12V5H0z" transform="translate(-145 -109) rotate(90 23 132)" />
                            <path stroke="currentColor" d="M5 2L9.5 7 14 2" transform="translate(-145 -109) rotate(90 23 132) rotate(-90 9.5 4.5)" />
                        </g>
                    </svg>
                </a>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="margin-bottom-md text-center load-more">
                <div class="margin-bottom-sm">Show 100 of 100 articles</div>
                <div class="margin-bottom-md load-more__progress">
                    <div class="load-more__indicator" style="width: 100%">
                    </div>
                </div>
                <a href="#" class="btn btn--primary">
                    Load more articles
                    <svg id="icon--arrow-down" class="margin-left-md" width="11" height="13" viewBox="0 0 11 13">
                        <g fill="none" fill-rule="evenodd">
                            <path fill="currentColor" d="M0 4H12V5H0z" transform="translate(-145 -109) rotate(90 23 132)" />
                            <path stroke="currentColor" d="M5 2L9.5 7 14 2" transform="translate(-145 -109) rotate(90 23 132) rotate(-90 9.5 4.5)" />
                        </g>
                    </svg>
                </a>
            </div>
        </div>
    </div>
 
{{#each states}}
    <div class="row">
        <div class="col-12">
            <div class="margin-bottom-md text-center load-more">
                <div class="margin-bottom-sm">{{title}}</div>
                <div class="margin-bottom-md load-more__progress">
                    <div class="load-more__indicator" style="width: {{progress}}">
                    </div>
                </div>
                <a href="#" class="btn btn--primary">
                    {{@root.title}}
                    <svg id="icon--arrow-down" class="margin-left-md" width="11" height="13" viewBox="0 0 11 13">
                        <g fill="none" fill-rule="evenodd">
                            <path fill="currentColor" d="M0 4H12V5H0z" transform="translate(-145 -109) rotate(90 23 132)"/>
                            <path stroke="currentColor" d="M5 2L9.5 7 14 2" transform="translate(-145 -109) rotate(90 23 132) rotate(-90 9.5 4.5)"/>
                        </g>
                    </svg>
                </a>
            </div>
        </div>
    </div>
{{/each}}
 
{
  "title": "Load more articles",
  "states": [
    {
      "title": "Show 25 of 100 articles",
      "progress": "25%"
    },
    {
      "title": "Show 50 of 100 articles",
      "progress": "50%"
    },
    {
      "title": "Show 75 of 100 articles",
      "progress": "75%"
    },
    {
      "title": "Show 100 of 100 articles",
      "progress": "100%"
    }
  ]
}

No notes defined.