Null JS

Flash List

The Flash List component is a visual representation of a list of tasks or processes, where each item is displayed as a circle with a vertical line connected to it. The circle can either be filled with a color to indicate completion, or it can flash to indicate that it is currently in progress.

Current Project Progress

Your current Project Progress!
  • Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut qui mollitia porro modi ipsam. Dicta!
    April, 22
  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum minima vel sunt, molestiae illo quibusdam.
    April, 22
  • Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias illum ex consequatur accusamus quas reprehenderit!
    April, 23
  • Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates cum quas architecto dolores, fugit accusantium.
    April, 24
  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit delectus perspiciatis dolorem nostrum ratione a!
    In progress
HTML | 
<div class="null-box-shadow null-border-radius null-padding-20">

        <h3 class="null-margin-bottom-10">Current Project Progress</h3>

        <div class="null-color-grey null-font-size-14 null-margin-bottom-20">
                Your current Project Progress!
        </div><!--End null-color-grey -->

        <ul class="null-flash-list-container null-position-relative">

                <li class="null-flash-list null-flash-list-done null-display-flex ">
                        <div>
                                <div class="null-font-weight-bold">Lorem ipsum ...</div>
                                <div class="null-font-size-14 null-color-grey">April, 22</div>
                        </div>
                </li><!--End null-flash-list -->

                <li class="null-flash-list null-flash-list-done null-display-flex">
                        <div>
                                <div class="null-font-weight-bold">Lorem ipsum ...</div>
                                <div class="null-font-size-14 null-color-grey">April, 22</div>
                        </div>
                </li><!--End null-flash-list -->

                <li class="null-flash-list null-flash-list-done null-display-flex">
                        <div>
                                <div class="null-font-weight-bold">Lorem ipsum ...</div>
                                <div class="null-font-size-14 null-color-grey">April, 23</div>
                        </div>
                </li><!--End null-flash-list -->

                <li class="null-flash-list null-flash-list-done null-display-flex">
                        <div>
                                <div class="null-font-weight-bold">Lorem ipsum ...</div>
                                <div class="null-font-size-14 null-color-grey">April, 24</div>
                        </div>
                </li><!--End null-flash-list -->

                <li class="null-flash-list null-flash-list-current null-display-flex">
                        <div>
                                <div class="null-font-weight-bold">Lorem ipsum ...</div>
                                <div class="null-font-size-14 null-color-grey">In progress</div>
                        </div>
                </li><!--End null-flash-list -->

        </ul><!--End null-flash-list-container-->


</div><!--End null-box-shadow -->
Unordered List
Alert