ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / letacommog / letaweb / css

.pace {
  width: 140px;
  height: 300px;
  position: fixed;
  top: -90px;
  right: -20px;
  z-index: 2000;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  -webkit-transition: all 2s linear 0s;
  -moz-transition: all 2s linear 0s;
  transition: all 2s linear 0s;
}

.pace.pace-active {
  -webkit-transform: scale(.25);
  -moz-transform: scale(.25);
  -ms-transform: scale(.25);
  -o-transform: scale(.25);
  transform: scale(.25);
  opacity: 1;
}

.pace .pace-activity {
  width: 140px;
  height: 140px;
  border-radius: 70px;
  background: #29d;
  position: absolute;
  top: 0;
  z-index: 1911;
  -webkit-animation: pace-bounce 1s infinite;
  -moz-animation: pace-bounce 1s infinite;
  -o-animation: pace-bounce 1s infinite;
  -ms-animation: pace-bounce 1s infinite;
  animation: pace-bounce 1s infinite;
}

.pace .pace-progress {
  position: absolute;
  display: block;
  left: 50%;
  bottom: 0;
  z-index: 1910;
  margin-left: -30px;
  width: 60px;
  height: 75px;
  background: rgba(20, 20, 20, .1);
  box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
  border-radius: 30px / 40px;
  -webkit-transform: scaleY(.3);
  -moz-transform: scaleY(.3);
  -ms-transform: scaleY(.3);
  -o-transform: scaleY(.3);
  transform: scaleY(.3);
  -webkit-animation: pace-compress .5s infinite alternate;
  -moz-animation: pace-compress .5s infinite alternate;
  -o-animation: pace-compress .5s infinite alternate;
  -ms-animation: pace-compress .5s infinite alternate;
  animation: pace-compress .5s infinite alternate;
}

@-webkit-keyframes pace-bounce {
  0% {
    top: 0;
    -webkit-animation-timing-function: ease-in;
  }
  40% {}
  50% {
    top: 140px;
    height: 140px;
    -webkit-animation-timing-function: ease-out;
  }
  55% {
    top: 160px;
    height: 120px;
    border-radius: 70px / 60px;
    -webkit-animation-timing-function: ease-in;
  }
  65% {
    top: 120px;
    height: 140px;
    border-radius: 70px;
    -webkit-animation-timing-function: ease-out;
  }
  95% {
    top: 0;
    -webkit-animation-timing-function: ease-in;
  }
  100% {
    top: 0;
    -webkit-animation-timing-function: ease-in;
  }
}

@-moz-keyframes pace-bounce {
  0% {
    top: 0;
    -moz-animation-timing-function: ease-in;
  }
  40% {}
  50% {
    top: 140px;
    height: 140px;
    -moz-animation-timing-function: ease-out;
  }
  55% {
    top: 160px;
    height: 120px;
    border-radius: 70px / 60px;
    -moz-animation-timing-function: ease-in;
  }
  65% {
    top: 120px;
    height: 140px;
    border-radius: 70px;
    -moz-animation-timing-function: ease-out;}
  95% {
    top: 0;
    -moz-animation-timing-function: ease-in;
  }
  100% {top: 0;
    -moz-animation-timing-function: ease-in;
  }
}

@keyframes pace-bounce {
  0% {
    top: 0;
    animation-timing-function: ease-in;
  }
  50% {
    top: 140px;
    height: 140px;
    animation-timing-function: ease-out;
  }
  55% {
    top: 160px;
    height: 120px;
    border-radius: 70px / 60px;
    animation-timing-function: ease-in;
  }
  65% {
    top: 120px;
    height: 140px;
    border-radius: 70px;
    animation-timing-function: ease-out;
  }
  95% {
    top: 0;
    animation-timing-function: ease-in;
  }
  100% {
    top: 0;
    animation-timing-function: ease-in;
  }
}

@-webkit-keyframes pace-compress {
  0% {
    bottom: 0;
    margin-left: -30px;
    width: 60px;
    height: 75px;
    background: rgba(20, 20, 20, .1);
    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
    border-radius: 30px / 40px;
    -webkit-animation-timing-function: ease-in;
  }
  100% {
    bottom: 30px;
    margin-left: -10px;
    width: 20px;
    height: 5px;
    background: rgba(20, 20, 20, .3);
    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
    border-radius: 20px / 20px;
    -webkit-animation-timing-function: ease-out;
  }
}

@-moz-keyframes pace-compress {
  0% {
    bottom: 0;
    margin-left: -30px;
    width: 60px;
    height: 75px;
    background: rgba(20, 20, 20, .1);
    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
    border-radius: 30px / 40px;
    -moz-animation-timing-function: ease-in;
  }
  100% {
    bottom: 30px;
    margin-left: -10px;
    width: 20px;
    height: 5px;
    background: rgba(20, 20, 20, .3);
    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
    border-radius: 20px / 20px;
    -moz-animation-timing-function: ease-out;
  }
}

@keyframes pace-compress {
  0% {
    bottom: 0;
    margin-left: -30px;
    width: 60px;
    height: 75px;
    background: rgba(20, 20, 20, .1);
    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
    border-radius: 30px / 40px;
    animation-timing-function: ease-in;
  }
  100% {
    bottom: 30px;
    margin-left: -10px;
    width: 20px;
    height: 5px;
    background: rgba(20, 20, 20, .3);
    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
    border-radius: 20px / 20px;
    animation-timing-function: ease-out;
  }
}

[+] ..
[+] typicons.font
[-] datetimepicker.css [edit]
[-] hover-min.css [edit]
[-] pace.maxos.css [edit]
[-] blank.gif [edit]
[-] flexigrid.css [edit]
[-] jquery.dataTables.min.css [edit]
[-] colorpicker.css [edit]
[-] font-awesome.min.css [edit]
[-] jquery.bxslider.css [edit]
[-] pace.big_counter.css [edit]
[-] pace.loading_bar.css [edit]
[-] animate.min.css [edit]
[-] jquery.cleditor.css [edit]
[-] spectrum.css [edit]
[-] admin2.css [edit]
[-] pace.css [edit]
[-] pace.flat_top.css [edit]
[-] pace.barber_shop.css [edit]
[-] pace.default.css [edit]
[-] jquery-ui-timepicker.css [edit]
[-] font-social.css [edit]
[+] select2
[-] login.css [edit]
[-] jcarousellite.css [edit]
[-] colorbox.css [edit]
[-] profile.css [edit]
[-] ie.css [edit]
[-] edit_page.css [edit]
[-] tree.css [edit]
[-] create_page.css [edit]
[+] entypo
[-] ihover.min.css [edit]
[-] bootstrap.min.css [edit]
[+] ui-iconpicker
[-] style.css [edit]
[-] nivo-slider.css [edit]
[-] ihover.css [edit]
[-] ecommerce.css [edit]
[-] pace.fill_left.css [edit]
[+] ui-grid
[-] editor.css [edit]
[-] screen.css [edit]
[-] ng-table.min.css [edit]
[+] owl_carousel
[-] jquery.validate.password.css [edit]
[+] slick
[-] fontawesome-iconpicker.min.css [edit]
[-] mediaelementplayer.css [edit]
[-] prettyPhoto.css [edit]
[+] owl-carousel
[+] linecons
[+] sm
[-] pace.bounce.css [edit]
[-] common-ui.css [edit]
[-] pace.corner_indicator.css [edit]
[-] bootstrap.css [edit]
[+] open-iconic
[-] pace.center_radar.css [edit]
[-] pace.center_atom.css [edit]
[-] widget.css [edit]
[-] checkout.css [edit]
[-] viewpage.css [edit]
[-] pace.inner.css [edit]
[-] bootstrap-theme.min.css [edit]
[-] codemirror.css [edit]
[-] form.css [edit]
[-] camera.css [edit]
[-] flexigrid.pack.css [edit]
[-] bg.gif [edit]
[-] jquery-ui-1.8.17.custom.css [edit]
[-] jquery.qtip.min.css [edit]
[-] cloudzoom.css [edit]
[-] pace.center_simple.css [edit]
[-] ui-iconpicker.css [edit]
[-] common.css [edit]
[-] main.css [edit]
[-] chopslider.css [edit]
[-] responsive.css [edit]
[-] xeditable.css [edit]
[-] pace.flash.css [edit]
[-] edit_page_editor.css [edit]
[-] admin.css [edit]
[+] nivo_slider
[+] jqvmap
[-] pace.center_circle.css [edit]
[-] font-awesome.css [edit]