Order Progress Bar with Animated steps Using CSS only

css3transition

7 years ago

Fantastic Order Progess Bar with Animation steps using

Hello Friends after a long time I am going to share with you a Fantastic Order Progess Bar with Animation steps using css only, in this post you will get all animation will be done only using css nothing javascript included.

It is just a very beautiful Process bar where you can click any steps with their related information in it. Top Progress bar will also animate as per step mention on it.

Before going in more brief I would like to share with you my recent top most article with you, hope fully you will like it:

Responsive Content Block with Hover Effect
Cool Mirror Effect Animation

Lets start knowing about this article more:

There are two part in this article viewport as you can see

1: Top section/ Progess Bar
2: Bottom Section/ Content Area

Top section include 5 click points each have different info and can we clicked to reach on desired section anytime or in anystep. When we click on Process step any section related content section will drop in bottom with content area.

To activate desired content area here we are using lavels with hidden radio input field to operate it relatively.

To know better follow the code structure as given below:

HTML Structure:

<div class='progress'>
  <div class='progress_inner'>
    <div class='progress_inner__step'>
      <label for='step-1'>Start order</label>
    </div>
    <div class='progress_inner__step'>
      <label for='step-2'>Prepare gift</label>
    </div>
    <div class='progress_inner__step'>
      <label for='step-3'>Pack gift</label>
    </div>
    <div class='progress_inner__step'>
      <label for='step-4'>Decorate box</label>
    </div>
    <div class='progress_inner__step'>
      <label for='step-5'>Send gift</label>
    </div>
    <input checked='checked' id='step-1' name='step' type='radio'>
    <input id='step-2' name='step' type='radio'>
    <input id='step-3' name='step' type='radio'>
    <input id='step-4' name='step' type='radio'>
    <input id='step-5' name='step' type='radio'>
    <div class='progress_inner__bar'></div>
    <div class='progress_inner__bar--set'></div>
    <div class='progress_inner__tabs'>
      <div class='tab tab-0'>
        <h1>Start order</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor ipsum, eleifend vitae massa non, dignissim finibus eros. Maecenas non eros tristique nisl maximus sollicitudin.</p>
      </div>
      <div class='tab tab-1'>
        <h1>Prepare gift</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor ipsum, eleifend vitae massa non, dignissim finibus eros. Maecenas non eros tristique nisl maximus sollicitudin.</p>
      </div>
      <div class='tab tab-2'>
        <h1>Pack gift</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor ipsum, eleifend vitae massa non, dignissim finibus eros. Maecenas non eros tristique nisl maximus sollicitudin.</p>
      </div>
      <div class='tab tab-3'>
        <h1>Decorate box</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor ipsum, eleifend vitae massa non, dignissim finibus eros. Maecenas non eros tristique nisl maximus sollicitudin.</p>
      </div>
      <div class='tab tab-4'>
        <h1>Send gift</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor ipsum, eleifend vitae massa non, dignissim finibus eros. Maecenas non eros tristique nisl maximus sollicitudin.</p>
      </div>
    </div>
    <div class='progress_inner__status'>
      <div class='box_base'></div>
      <div class='box_lid'></div>
      <div class='box_ribbon'></div>
      <div class='box_bow'>
        <div class='box_bow__left'></div>
        <div class='box_bow__right'></div>
      </div>
      <div class='box_item'></div>
      <div class='box_tag'></div>
      <div class='box_string'></div>
    </div>
  </div>
</div>

<label for='step-1'>Start order</label>

</div>

<label for='step-2'>Prepare gift</label>

</div>

</div>

<label for='step-4'>Decorate box</label>

</div>

</div>

<h1>Start order</h1>