Open In App

Semantic-UI Step Completed State

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

Semantic UI Step States offers us different states like active, completed, and disabled. In this article, we will know about the Semantic UI Step completed states. This status is used to create steps that will be completed.

Semantic UI Completed Step is used to make any particular step completed, we can not make all the steps disabled by using this class.

Semantic-UI Step Completed Step Class:

  • completed: This class is used to mark the step completed.

Syntax:

<div class="step completed">
 ...
</div>

Example 1: Below example illustrate the Semantic UI Step Completed state.

HTML




<!DOCTYPE html>
<html>
   <head>
      <title>Semantic-UI Step Completed State</title>
      <link href=
            rel="stylesheet" />
   </head>
   <body>
      <center>
         <h1 class="ui header green">Geeksforgeeks</h1>
         <strong> Semantic-UI Step Completed Step </strong>
         <br><br>
      </center>
      <strong>Completed Step:</strong>
      <div class="ui steps">
          <div class="step">
             <i class="truck icon green"></i>
             <div class="content">
                <div class="title">Shipping</div>
                <div class="description">
                   Select your Address
                </div>
             </div>
          </div>
          <div class="step">
             <i class="file alternate blue icon"></i>
             <div class="content">
                <div class="title">Billing</div>
                <div class="description">
                   Select your way to pay
                </div>
             </div>
          </div>
          <div class="step ">
             <i class="file alternate icon"></i>
             <div class="content">
                <div class="title">Delivered</div>
                <div class="description">
                   Check you package
                </div>
             </div>
          </div>
          <div class="step completed">
             <i class="icon"></i>
             <div class="content">
                <div class="title">Return</div>
                <div class="description">
                   Refund initiated
                </div>
             </div>
          </div>
      </div>
   </body>
</html>


Output:

Semantic-UI Step Completed Step

Semantic-UI Step Completed Step

Example 2: In this example, we will make the complete step active.

HTML




<!DOCTYPE html>
<html>
   <head>
      <title>Semantic-UI Step Completed State</title>
      <link href=
            rel="stylesheet" />
   </head>
   <body>
      <center>
         <h1 class="ui header green">Geeksforgeeks</h1>
         <strong> Semantic-UI Step Completed Step </strong>
         <br><br>
      </center>
      <strong>Completed Step:</strong>
      <div class="ui steps">
          <div class="step">
             <i class="truck icon green"></i>
             <div class="content">
                <div class="title">Shipping</div>
                <div class="description">
                   Select your Address
                </div>
             </div>
          </div>
          <div class="step">
             <i class="file alternate blue icon"></i>
             <div class="content">
                <div class="title">Billing</div>
                <div class="description">
                   Select your way to pay
                </div>
             </div>
          </div>
          <div class="step active completed">
             <i class="icon"></i>
             <div class="content">
                <div class="title">Return</div>
                <div class="description">
                   Refund initiated
                </div>
             </div>
          </div>
      </div>
   </body>
</html>


Output:

Semantic-UI Step Completd State

Semantic-UI Step Completed State

Reference link: https://semantic-ui.com/elements/step.html#completed



Last Updated : 17 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads