Increase aos-delay value each time printing data

I'm using laravel and aos-delay to display data with animation.. with pure html its too easy to implement the feature that I want, which is display data with animation but, it display it one by one for example..
Data (1) display right away.
Data (2) display right after data (1) with 50 ms delay
Data (3) display right after data (2) with 100 ms delay

So as you can see the 50 is the diffrenet and it increases by 50 each time the data is beeing displayed.

This is my blade template:

@foreach($weekly_service as $service)
                <div  data-aos="fade-up" data-aos-delay="">
                    <!-- Card -->
                    <a href="#"
                       >
                        <!-- Image -->
                        <div >
                            <div >
                                <i ></i>
                            </div>
                            <!-- Icon BG -->
                            <svg width="116" height="82" viewBox="0 0 116 82" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M11.9238 65.8391C11.9238 65.8391 20.4749 72.4177 35.0465 70.036C49.6182 67.6542 75.9897 78.4406 75.9897 78.4406C75.9897 78.4406 90.002 85.8843 104.047 79.2427C118.093 72.6012 115.872 58.8253 115.872 58.8253C115.743 56.8104 115.606 46.9466 97.5579 22.0066C91.0438 13.0024 84.1597 6.97958 75.9458 3.74641C58.8245 -2.99096 37.7881 -0.447684 22.9067 9.81852C15.5647 14.8832 7.65514 22.0695 3.0465 31.5007C-7.27017 52.6135 11.9238 65.8391 11.9238 65.8391Z"
                                    fill="currentColor" />
                            </svg>

                        </div>

                        <!-- Footer -->
                        <div >
                            <h5 >{{$service->name}}</h5>
                            <p >أكثر من 5 مقدم خدمة</p>
                        </div>
                    </a>
                </div>
            @endforeach

I want data-aos-delay="" to be 50 in this first service and 100 in the second one and so one so forth until all the services has been displayed.
I did a for loop to increase variable $i by 50 each time but when I place it before or right after the foreach loop it will display the service like this:
Data (1) display right away
Data (2) display right away
until all services is displayed. and then it will go through the loop again and display the same data but with 50 ms display delay!

How can I display all services with no duplicates, except the delay value will be 50 at service number 1 and increases by 50 in each one of the services?

CodePudding user response：

use the $loop object that Laravel creates within an @foreach loop

<div  
    data-aos="fade-up" 
    data-aos-delay="{{ $loop->iteration * 50}}"
>

$loop->iteration starts at 1 and increments by one for each pass around the loop