Bootstrap Snippet Frames animation using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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" id="loading">
    <div class="row">
        <div class="animationload">
            <div class="osahanloading"></div>
        </div>
    </div>
</div>
<section>
        <div class="col-centered col-lg-12">
          <div class="pricing-tables attached ">
            <div class="row ">
              <div class="col-sm-3 col-md-2 col-lg-2">
                <div id="div1" class="plan  first">
                  <div class="head">
                    <h2 style="font-size:18px">Actualmente en tu empresa</h2>
                  </div>
                  <div class="price mediafix">
                    <h3><span class="symbol">$</span>126,127,164</h3>
                    <h4>Valor de nómina actual</h4>
                  </div>
                  <hr>
                  <ul class="item-list">
                    <li><b>$29,372,164</b><br><desc>Carga prestacional</desc></li>
                    <li><b>$96,755,000</b><br><desc>Carga salarial</desc></li>
                  </ul>
                </div>
              </div>
              <div class="col-sm-3 col-md-3 col-lg-3">
                <div id="div2" class="plan first recommended">
                  <div class="head">
                    <h2><span style="font-size:12px">con</span><img src="http://www.sodexobeneficios.co/hs-fs/hubfs/images/sodexo-white-right.png" width="200"/></h2>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* pricing table */
.pricing-tables {
  padding: 20px;
}
.pricing-tables h1 {
  font-size: 48px;
}
.pricing-tables .plan.first {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px !important;
}
.pricing-tables .plan.last {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
.pricing-tables .plan.recommended {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.pricing-tables .plan.recommended .head {
  /*margin-bottom: 20px;*/
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.pricing-tables.attached .col-sm-4, .pricing-tables.attached .col-md-4, .pricing-tables.attached .col-sm-3, .pricing-tables.attached .col-md-3 {
  padding-left: 0;
  padding-right: 0;
}
.pricing-tables.attached .plan {
  border-radius: 0;
}
.pricing-tables.attached .plan .head {
  border-radius: 0;
}
/*.pricing-tables.attached .plan.recommended {
  border-radius: 4px;
}*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(function () {
    function anim0(){
      //alert("Boom!");
      $('#loading').fadeOut();
      $('#div1').fadeIn();
    }
    function anim1(){
      //alert("Boom!");
      $('#div2').fadeIn();
    }
    function anim2(){
      //alert("Boom!");
      $('#div3').fadeIn();
    }
    
    setTimeout(anim0, 2000);
    setTimeout(anim1, 4000);
    setTimeout(anim2, 6000);
    
    /*change value*/
    $('.section-bottom').keypress(function() {
        var total= 0;
        total= calcprestsodexo();
        console.log('INFO: ' + total);
        $('th:nth-child(2)').fadeOut();
        $('#numprestacion').empty();
        $('#numprestacion').append('$' + total) ;
    }); 
    
    function calcprestsodexo() {
        var numPrest = 0, numAlimentacion = 0, total= 0;
        numPrest = $('.input-sodexo').val();
        numAlimentacion = $('#sodexo-alimentacion').attr("value");
        total= numAlimentacion * (numPrest/100);
        return total;
    }
    
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Frames animation "
Bootstrap 3.0.0 Snippet by novadevco

Related: See More

Questions / Comments:

"Frames animation " Bootstrap 3.0.0 Snippet by novadevco

Related: See More

Questions / Comments:

"Frames animation "
Bootstrap 3.0.0 Snippet by novadevco