Skip to content
Related Articles

Related Articles

Semantic-UI Step Completed State

View Discussion
Improve Article
Save Article
  • Last Updated : 29 Jul, 2022

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 Completd 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 initated
                </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 Completd 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 initated
                </div>
             </div>
          </div>
      </div>
   </body>
</html>


Output:

Semantic-UI Step Completd State

Semantic-UI Step Completd State

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!