Blaze UI Timelines Attributes

Last Updated : 27 Apr, 2022

Blaze UI is a CSS open-source lightweight UI toolkit that provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive.

Blaze UI Timelines are used to illustrate the events that occurred according to their terminology or what should be planned to happen. It provides an easy setup to create a timeline without any extra CSS. We can also apply different colors to the timeline.

Blaze UI Timelines Attributes:

Timeline:
- alternate: This field takes a boolean value and if set to true, the line of the item is styled centrally.
- loading: This field takes a boolean value and if set to true, the item with loading set to true occupies the last position.
Timeline item:
- last: This field takes a boolean value and if set to true for an item, the item occupies the last position.
- loading: This field takes a boolean value and if set to true for an item, the item is styled differently to indicate that the item is not loaded.

Syntax: Create a timeline in Blaze UI as follows:

<blaze-timeline>
  <blaze-timeline-item type="brand"> 
    <!-- Content -->
  </blaze-timeline-item>
  <!-- More Items -->
</blaze-timeline>

Example 1: In the following example, we have some items in a timeline.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0"/> 
    <title>GeeksforGeeks | BlazeUI</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"/> 
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
    <script nomodule="" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/jquery-3.6.0.min.js"> 
    </script> 
</head> 
<body> 
    <div class="o-container" style="padding: 1em;"> 
        <center> 
            <div> 
                <h1 style="color: green;">GeeksforGeeks</h1> 
            </div> 
            <strong>Blaze UI Timelines Attributes</strong> 
            <br/> 
            <br/> 
            <p>Welcome to GeeksforGeeks</p> 
        </center> 
        <blaze-timeline loading> 
            <blaze-timeline-item type="brand"> 
                Learn basic HTML, CSS 
            </blaze-timeline-item> 
            <blaze-timeline-item type="info"> 
                Learn Javascript 
            </blaze-timeline-item> 
            <blaze-timeline-item type="success"> 
                Create a portfolio website with  
                HTML,CSS and Javascript 
            </blaze-timeline-item> 
            <blaze-timeline-item type="warning"> 
                Learn a frontend framework like  
                ReactJs, Vue.js, etc. 
            </blaze-timeline-item> 
            <blaze-timeline-item type="error"> 
                Learn a backend language like  
                Node.Js, PHP, etc. 
            </blaze-timeline-item> 
            <blaze-timeline-item last> 
                Project: Create a full stack  
                application like Shopping Website  
                or Schedule Manager, etc. 
            </blaze-timeline-item> 
            <blaze-timeline-item loading> 
                Continue Practicing 
            </blaze-timeline-item> 
        </blaze-timeline> 
    </div> 
    <script></script> 
</body> 
</html>

Output:

Example 2: In the following example, we will have a timeline with alternative items.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0"/> 
    <title>GeeksforGeeks | BlazeUI</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"/> 
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
    <script nomodule="" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/jquery-3.6.0.min.js"> 
    </script> 
</head> 
<body> 
    <div class="o-container" style="padding: 1em;"> 
        <center> 
            <div> 
                <h1 style="color: green;">GeeksforGeeks</h1> 
            </div> 
            <strong>Blaze UI Timelines Attributes</strong> 
            <br /> 
            <br /> 
            <p>Welcome to GeeksforGeeks</p> 
        </center> 
        <blaze-timeline alternate> 
            <blaze-timeline-item type="success" left> 
                Item 1 
            </blaze-timeline-item> 
            <blaze-timeline-item type="success"> 
                Item 2 
            </blaze-timeline-item> 
            <blaze-timeline-item type="success" left> 
                Item 3 
            </blaze-timeline-item> 
            <blaze-timeline-item type="success"> 
                Item 4 
            </blaze-timeline-item> 
            <blaze-timeline-item type="success" left> 
                Item 5 
            </blaze-timeline-item> 
            <blaze-timeline-item type="success"> 
                Item 6 
            </blaze-timeline-item> 
            <blaze-timeline-item type="success" left> 
                Item 7 
            </blaze-timeline-item> 
            <blaze-timeline-item type="success"> 
                Item 8 
            </blaze-timeline-item> 
            <blaze-timeline-item type="success" left> 
                Item 9 
            </blaze-timeline-item> 
            <blaze-timeline-item type="success" last> 
                Item 10 
            </blaze-timeline-item> 
        </blaze-timeline> 
    </div> 
    <script></script> 
</body> 
</html>