<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<section>
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
<span class="round-tab">
<i class="glyphicon glyphicon-folder-open"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
<span class="round-tab">
<i class="glyphicon glyphicon-pencil"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
<span class="round-tab">
<i class="glyphicon glyphicon-picture"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>
<form role="form">
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<h3>Крок перший</h3>
<p>З якого типу девайсу, Вам буде зручніше виконвати оплату?</p>
<div class="quiz" id="quiz" data-toggle="buttons">
<label class="element-animation1 btn btn-lg btn-primary btn-block next-step"><span class="btn-label "><i class="glyphicon glyphicon-chevron-right"></i></span> <input type="radio" name="devType" value="1">Смартфон, або планшет </label>
<label class="element-animation2 btn btn-lg btn-primary btn-block next-step"><span class="btn-label "><i class="glyphicon glyphicon-chevron-right"></i></span> <input type="radio" name="devType" value="2">Персональний компютер</label>
</div>
</div>
<div class="tab-pane" role="tabpanel" id="step2">
<h3>Step 2</h3>
<p>This is step 2</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step3">
<h3>Step 3</h3>
<p>This is step 3</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-default next-step">Skip</button></li>
<li><button type="button" class="btn btn-primary btn-info-full next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="complete">
<h3>Complete</h3>
<p>You have successfully completed all steps.</p>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</section>
</div>
</div>
.wizard {
margin: 20px auto;
background: #fff;
}
.wizard .nav-tabs {
position: relative;
margin: 40px auto;
margin-bottom: 0;
border-bottom-color: #e0e0e0;
}
.wizard > div.wizard-inner {
position: relative;
}
.connecting-line {
height: 2px;
background: #e0e0e0;
position: absolute;
width: 80%;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
z-index: 1;
}
.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
color: #555555;
cursor: default;
border: 0;
border-bottom-color: transparent;
}
span.round-tab {
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: #fff;
border: 2px solid #e0e0e0;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
span.round-tab i{
color:#555555;
}
.wizard li.active span.round-tab {
background: #fff;
border: 2px solid #5bc0de;
}
.wizard li.active span.round-tab i{
color: #5bc0de;
}
span.round-tab:hover {
color: #333;
border: 2px solid #333;
}
.wizard .nav-tabs > li {
width: 25%;
}
.wizard li:after {
content: " ";
position: absolute;
left: 46%;
opacity: 0;
margin: 0 auto;
bottom: 0px;
border: 5px solid transparent;
border-bottom-color: #5bc0de;
transition: 0.1s ease-in-out;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 46%;
opacity: 1;
margin: 0 auto;
bottom: 0px;
border: 10px solid transparent;
border-bottom-color: #5bc0de;
}
.wizard .nav-tabs > li a {
width: 70px;
height: 70px;
margin: 20px auto;
border-radius: 100%;
padding: 0;
}
.wizard .nav-tabs > li a:hover {
background: transparent;
}
.wizard .tab-pane {
position: relative;
padding-top: 50px;
}
.wizard h3 {
margin-top: 0;
}
@media( max-width : 585px ) {
.wizard {
width: 90%;
height: auto !important;
}
span.round-tab {
font-size: 16px;
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard .nav-tabs > li a {
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 35%;
}
}
#qid {
padding: 10px 15px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 20px;
}
label.btn {
padding: 18px 60px;
white-space: normal;
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
-o-transform: scale(1.0);
-webkit-transition-duration: .3s;
-moz-transition-duration: .3s;
-o-transition-duration: .3s
}
label.btn:hover {
text-shadow: 0 3px 2px rgba(0,0,0,0.4);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1)
}
label.btn-block {
text-align: left;
position: relative
}
label .btn-label {
position: absolute;
left: 0;
top: 0;
display: inline-block;
padding: 0 10px;
background: rgba(0,0,0,.15);
height: 100%
}
label .glyphicon {
top: 34%
}
.element-animation1 {
animation: animationFrames ease .8s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
-webkit-animation: animationFrames ease .8s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-ms-animation: animationFrames ease .8s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%
}
.element-animation2 {
animation: animationFrames ease 1s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
-webkit-animation: animationFrames ease 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-ms-animation: animationFrames ease 1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%
}
.element-animation3 {
animation: animationFrames ease 1.2s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
-webkit-animation: animationFrames ease 1.2s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-ms-animation: animationFrames ease 1.2s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%
}
.element-animation4 {
animation: animationFrames ease 1.4s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
-webkit-animation: animationFrames ease 1.4s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-ms-animation: animationFrames ease 1.4s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%
}
@keyframes animationFrames {
0% {
opacity: 0;
transform: translate(-1500px,0px)
}
60% {
opacity: 1;
transform: translate(30px,0px)
}
80% {
transform: translate(-10px,0px)
}
100% {
opacity: 1;
transform: translate(0px,0px)
}
}
@-webkit-keyframes animationFrames {
0% {
opacity: 0;
-webkit-transform: translate(-1500px,0px)
}
60% {
opacity: 1;
-webkit-transform: translate(30px,0px)
}
80% {
-webkit-transform: translate(-10px,0px)
}
100% {
opacity: 1;
-webkit-transform: translate(0px,0px)
}
}
@-ms-keyframes animationFrames {
0% {
opacity: 0;
-ms-transform: translate(-1500px,0px)
}
60% {
opacity: 1;
-ms-transform: translate(30px,0px)
}
80% {
-ms-transform: translate(-10px,0px)
}
100% {
opacity: 1;
-ms-transform: translate(0px,0px)
}
}
.modal-header {
background-color: transparent;
color: inherit
}
.modal-body {
min-height: 205px
}
#loadbar {
position: absolute;
width: 62px;
height: 77px;
top: 2em
}
.blockG {
position: absolute;
background-color: #FFF;
width: 10px;
height: 24px;
-moz-border-radius: 8px 8px 0 0;
-moz-transform: scale(0.4);
-moz-animation-name: fadeG;
-moz-animation-duration: .8800000000000001s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: linear;
-webkit-border-radius: 8px 8px 0 0;
-webkit-transform: scale(0.4);
-webkit-animation-name: fadeG;
-webkit-animation-duration: .8800000000000001s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
-ms-border-radius: 8px 8px 0 0;
-ms-transform: scale(0.4);
-ms-animation-name: fadeG;
-ms-animation-duration: .8800000000000001s;
-ms-animation-iteration-count: infinite;
-ms-animation-direction: linear;
-o-border-radius: 8px 8px 0 0;
-o-transform: scale(0.4);
-o-animation-name: fadeG;
-o-animation-duration: .8800000000000001s;
-o-animation-iteration-count: infinite;
-o-animation-direction: linear;
border-radius: 8px 8px 0 0;
transform: scale(0.4);
animation-name: fadeG;
animation-duration: .8800000000000001s;
animation-iteration-count: infinite;
animation-direction: linear
}
#rotateG_01 {
left: 0;
top: 28px;
-moz-animation-delay: .33s;
-moz-transform: rotate(-90deg);
-webkit-animation-delay: .33s;
-webkit-transform: rotate(-90deg);
-ms-animation-delay: .33s;
-ms-transform: rotate(-90deg);
-o-animation-delay: .33s;
-o-transform: rotate(-90deg);
animation-delay: .33s;
transform: rotate(-90deg)
}
#rotateG_02 {
left: 8px;
top: 10px;
-moz-animation-delay: .44000000000000006s;
-moz-transform: rotate(-45deg);
-webkit-animation-delay: .44000000000000006s;
-webkit-transform: rotate(-45deg);
-ms-animation-delay: .44000000000000006s;
-ms-transform: rotate(-45deg);
-o-animation-delay: .44000000000000006s;
-o-transform: rotate(-45deg);
animation-delay: .44000000000000006s;
transform: rotate(-45deg)
}
#rotateG_03 {
left: 26px;
top: 3px;
-moz-animation-delay: .55s;
-moz-transform: rotate(0deg);
-webkit-animation-delay: .55s;
-webkit-transform: rotate(0deg);
-ms-animation-delay: .55s;
-ms-transform: rotate(0deg);
-o-animation-delay: .55s;
-o-transform: rotate(0deg);
animation-delay: .55s;
transform: rotate(0deg)
}
#rotateG_04 {
right: 8px;
top: 10px;
-moz-animation-delay: .66s;
-moz-transform: rotate(45deg);
-webkit-animation-delay: .66s;
-webkit-transform: rotate(45deg);
-ms-animation-delay: .66s;
-ms-transform: rotate(45deg);
-o-animation-delay: .66s;
-o-transform: rotate(45deg);
animation-delay: .66s;
transform: rotate(45deg)
}
#rotateG_05 {
right: 0;
top: 28px;
-moz-animation-delay: .7700000000000001s;
-moz-transform: rotate(90deg);
-webkit-animation-delay: .7700000000000001s;
-webkit-transform: rotate(90deg);
-ms-animation-delay: .7700000000000001s;
-ms-transform: rotate(90deg);
-o-animation-delay: .7700000000000001s;
-o-transform: rotate(90deg);
animation-delay: .7700000000000001s;
transform: rotate(90deg)
}
#rotateG_06 {
right: 8px;
bottom: 7px;
-moz-animation-delay: .8800000000000001s;
-moz-transform: rotate(135deg);
-webkit-animation-delay: .8800000000000001s;
-webkit-transform: rotate(135deg);
-ms-animation-delay: .8800000000000001s;
-ms-transform: rotate(135deg);
-o-animation-delay: .8800000000000001s;
-o-transform: rotate(135deg);
animation-delay: .8800000000000001s;
transform: rotate(135deg)
}
#rotateG_07 {
bottom: 0;
left: 26px;
-moz-animation-delay: .99s;
-moz-transform: rotate(180deg);
-webkit-animation-delay: .99s;
-webkit-transform: rotate(180deg);
-ms-animation-delay: .99s;
-ms-transform: rotate(180deg);
-o-animation-delay: .99s;
-o-transform: rotate(180deg);
animation-delay: .99s;
transform: rotate(180deg)
}
#rotateG_08 {
left: 8px;
bottom: 7px;
-moz-animation-delay: 1.1s;
-moz-transform: rotate(-135deg);
-webkit-animation-delay: 1.1s;
-webkit-transform: rotate(-135deg);
-ms-animation-delay: 1.1s;
-ms-transform: rotate(-135deg);
-o-animation-delay: 1.1s;
-o-transform: rotate(-135deg);
animation-delay: 1.1s;
transform: rotate(-135deg)
}
@-moz-keyframes fadeG {
0% {
background-color: #000
}
100% {
background-color: #FFF
}
}
@-webkit-keyframes fadeG {
0% {
background-color: #000
}
100% {
background-color: #FFF
}
}
@-ms-keyframes fadeG {
0% {
background-color: #000
}
100% {
background-color: #FFF
}
}
@-o-keyframes fadeG {
0% {
background-color: #000
}
100% {
background-color: #FFF
}
}
@keyframes fadeG {
0% {
background-color: #000
}
100% {
background-color: #FFF
}
}
$(document).ready(function () {
//Initialize tooltips
$('.nav-tabs > li a[title]').tooltip();
//Wizard
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
return false;
}
});
$(".next-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
$active.next().removeClass('disabled');
nextTab($active);
});
$(".prev-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
prevTab($active);
});
});
function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
$(elem).prev().find('a[data-toggle="tab"]').click();
}
