Kumpulan Loading Progress Keren Untuk Blog

Kumpulan Loading Progress Keren Untuk Blog

18:53:00
Kumpulan Loading Progress Keren Untuk Blog

Selamat datang agan atau aganwati, kali ini Saya akan berbagi cara yaitu menambahkan loading bar progress keren untuk blog, langsung simak saja dibawah ini;


Langkah


1. Login pada blog Anda masing-masing,

 2. Pada menu dashboard blog, masuk menu template,

 3. Lalu pilih menu edit html,

 4. Cari kode ]]></b:skin> atau </style> dengan cara
Ctrl
+
F
,


 5. Lalu copy script di bawah ini, Anda dapat memilih 1 tema saja untuk blog Anda,




 Tema Circle Loading
Demo
click to view


 
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #29d;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 2px;

  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

.pace .pace-progress-inner {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -moz-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  -o-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

.pace .pace-activity {
  display: block;
  position: fixed;
  z-index: 2000;
  top: 15px;
  right: 15px;
  width: 14px;
  height: 14px;
  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 10px;
  -webkit-animation: pace-spinner 400ms linear infinite;
  -moz-animation: pace-spinner 400ms linear infinite;
  -ms-animation: pace-spinner 400ms linear infinite;
  -o-animation: pace-spinner 400ms linear infinite;
  animation: pace-spinner 400ms linear infinite;
}

@-webkit-keyframes pace-spinner {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner {
  0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner {
  0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner {
  0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner {
  0% { transform: rotate(0deg); transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}






Tema Barber Loading
Demo
click to view



.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background-color: #29d;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 12px;
  overflow: hidden;

  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

.pace .pace-progress-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: -32px;
  bottom: 0;

  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  -webkit-background-size: 32px 32px;
  -moz-background-size: 32px 32px;
  -o-background-size: 32px 32px;
  background-size: 32px 32px;

  -webkit-animation: pace-stripe-animation 500ms linear infinite;
  -moz-animation: pace-stripe-animation 500ms linear infinite;
  -ms-animation: pace-stripe-animation 500ms linear infinite;
  -o-animation: pace-stripe-animation 500ms linear infinite;
  animation: pace-stripe-animation 500ms linear infinite;
}

@-webkit-keyframes pace-stripe-animation {
  0% { -webkit-transform: none; transform: none; }
  100% { -webkit-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-moz-keyframes pace-stripe-animation {
  0% { -moz-transform: none; transform: none; }
  100% { -moz-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-o-keyframes pace-stripe-animation {
  0% { -o-transform: none; transform: none; }
  100% { -o-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-ms-keyframes pace-stripe-animation {
  0% { -ms-transform: none; transform: none; }
  100% { -ms-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@keyframes pace-stripe-animation {
  0% { transform: none; transform: none; }
  100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
}





Tema Mac OSX Loading


Demo
click to view


 
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background-color: #78c0f0;

  color: #CBE7F9;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 12px;
  overflow: hidden;

  -webkit-border-radius: 0 0 4px 0;
  -moz-border-radius: 0 0 4px 0;
  -o-border-radius: 0 0 4px 0;
  border-radius: 0 0 4px 0;

  -webkit-box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
  -o-box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
  box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);

  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

.pace .pace-progress-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: -28px;
  bottom: 0;

  background-image: -o-radial-gradient(rgba(25, 147, 228, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
  background-image: -moz-radial-gradient(rgba(25, 147, 228, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
  background-image: -webkit-radial-gradient(rgba(25, 147, 228, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
  background-image: radial-gradient(rgba(25, 147, 228, 0.6) 0%, rgba(120, 192, 240, 0) 100%);


  -webkit-background-size: 28px 100%;
  -moz-background-size: 28px 100%;
  -o-background-size: 28px 100%;
  background-size: 28px 100%;

  -webkit-animation: pace-stripe-animation 500ms linear infinite;
  -moz-animation: pace-stripe-animation 500ms linear infinite;
  -ms-animation: pace-stripe-animation 500ms linear infinite;
  -o-animation: pace-stripe-animation 500ms linear infinite;
  animation: pace-stripe-animation 500ms linear infinite;
}

@-webkit-keyframes pace-stripe-animation {
  0% { -webkit-transform: none; transform: none; }
  100% { -webkit-transform: translate(-28px, 0); transform: translate(-28px, 0); }
}
@-moz-keyframes pace-stripe-animation {
  0% { -moz-transform: none; transform: none; }
  100% { -moz-transform: translate(-28px, 0); transform: translate(-28px, 0); }
}
@-o-keyframes pace-stripe-animation {
  0% { -o-transform: none; transform: none; }
  100% { -o-transform: translate(-28px, 0); transform: translate(-28px, 0); }
}
@-ms-keyframes pace-stripe-animation {
  0% { -ms-transform: none; transform: none; }
  100% { -ms-transform: translate(-28px, 0); transform: translate(-28px, 0); }
}
@keyframes pace-stripe-animation {
  0% { transform: none; transform: none; }
  100% { transform: translate(-28px, 0); transform: translate(-28px, 0); }
}





Tema Flat Top Loading
Demo
click to view






.pace {



  -webkit-pointer-events: none;



  pointer-events: none;



  -webkit-user-select: none;



  -moz-user-select: none;



  user-select: none;



}



.pace .pace-progress {



  display: block;



  position: fixed;



  z-index: 2000;



  top: 0;



  left: 0;



  height: 12px;



  background: #29d;



  -webkit-transition:
-webkit-transform .3s, width 1s;



  -moz-transition: width 1s;



  -o-transform: width 1s;



  transition: transform .3s, width
1s;



  -webkit-transform:
translateY(-50px);



  transform: translateY(-50px);



  pointer-events: none;



}



.pace.pace-active .pace-progress {



  -webkit-transform: translateY(0);



  transform: translateY(0);



}






Tema Big Counter Loading
Demo
click to view


.pace {

  -webkit-pointer-events: none;

  pointer-events: none;

  -webkit-user-select: none;

  -moz-user-select: none;

  user-select: none;

}

.pace.pace-inactive .pace-progress {

  display: none;

}

.pace .pace-progress {

  position: fixed;

  z-index: 2000;

  top: 0;

  right: 0;

  height: 5rem;

  width: 5rem;

}

.pace .pace-progress:after {

  display: block;

  position: absolute;

  top: 0;

  right: .5rem;

  content: attr(data-progress-text);

  font-family: "Helvetica Neue", sans-serif;

  font-weight: 100;

  font-size: 5rem;

  line-height: 1;

  text-align: right;

  color: rgba(0, 0, 0, 0.19999999999999996);

}




Tema Big Corner Loading
Demo
click to view


.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace .pace-activity {
  display: block;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background: #29d;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
  transform: translateX(100%) translateY(-100%) rotate(45deg);
  pointer-events: none;
}

.pace.pace-active .pace-activity {
  -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
  transform: translateX(50%) translateY(-50%) rotate(45deg);
}

.pace .pace-activity::before,
.pace .pace-activity::after {
    position: absolute;
    bottom: 30px;
    left: 50%;
    display: block;
    border: 5px solid #fff;
    border-radius: 50%;
    content: '';
}

.pace .pace-activity::before {
    margin-left: -40px;
    width: 80px;
    height: 80px;
    border-right-color: rgba(0, 0, 0, .2);
    border-left-color: rgba(0, 0, 0, .2);
    -webkit-animation: pace-rotation 3s linear infinite;
    animation: pace-rotation 3s linear infinite;
}

.pace .pace-activity::after {
    bottom: 50px;
    margin-left: -20px;
    width: 40px;
    height: 40px;
    border-top-color: rgba(0, 0, 0, .2);
    border-bottom-color: rgba(0, 0, 0, .2);
    -webkit-animation: pace-rotation 1s linear infinite;
    animation: pace-rotation 1s linear infinite;
}

@-webkit-keyframes pace-rotation {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(359deg); }
}
@keyframes pace-rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}





Tema Bounce Loading
Demo
click to view


.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;
  }
}





Tema Center Circle Loading
Demo
click to view


.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  -webkit-perspective: 12rem;
  -moz-perspective: 12rem;
  -ms-perspective: 12rem;
  -o-perspective: 12rem;
  perspective: 12rem;

  z-index: 2000;
  position: fixed;
  height: 6rem;
  width: 6rem;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.pace.pace-inactive .pace-progress {
  display: none;
}

.pace .pace-progress {
  position: fixed;
  z-index: 2000;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 6rem;
  width: 6rem !important;
  line-height: 6rem;
  font-size: 2rem;
  border-radius: 50%;
  background: rgba(34, 153, 221, 0.8);
  color: #fff;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 100;
  text-align: center;

  -webkit-animation: pace-3d-spinner linear infinite 2s;
  -moz-animation: pace-3d-spinner linear infinite 2s;
  -ms-animation: pace-3d-spinner linear infinite 2s;
  -o-animation: pace-3d-spinner linear infinite 2s;
  animation: pace-3d-spinner linear infinite 2s;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.pace .pace-progress:after {
  content: attr(data-progress-text);
  display: block;
}

@-webkit-keyframes pace-3d-spinner {
  from {
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(360deg);
  }
}

@-moz-keyframes pace-3d-spinner {
  from {
    -moz-transform: rotateY(0deg);
  }
  to {
    -moz-transform: rotateY(360deg);
  }
}

@-ms-keyframes pace-3d-spinner {
  from {
    -ms-transform: rotateY(0deg);
  }
  to {
    -ms-transform: rotateY(360deg);
  }
}

@-o-keyframes pace-3d-spinner {
  from {
    -o-transform: rotateY(0deg);
  }
  to {
    -o-transform: rotateY(360deg);
  }
}

@keyframes pace-3d-spinner {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}






Tema Circle Atom Loading
Demo
click to view


.pace.pace-inactive {

  display: none;

}

 
.pace {

  -webkit-pointer-events: none;

  pointer-events: none;

 

  -webkit-user-select: none;

  -moz-user-select: none;

  user-select: none;

 

  z-index: 2000;

  position: fixed;

  height: 60px;

  width: 100px;

  margin: auto;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

}

 

.pace .pace-progress {

  z-index: 2000;

  position: absolute;

  height: 60px;

  width: 100px !important;

}

 

.pace .pace-progress:before {

  content: attr(data-progress-text);

  text-align: center;

  color: #fff;

  background: #29d;

  border-radius: 50%;

  font-family: "Helvetica Neue", sans-serif;

  font-size: 14px;

  font-weight: 100;

  line-height: 1;

  padding: 20% 0 7px;

  width: 50%;

  height: 40%;

  margin: 10px 0 0 30px;

  display: block;

  z-index: 999;

  position: absolute;

}

 

.pace .pace-progress:after {

  border-radius: 50%;

  border: 5px solid #29d;

  content: ' ';

  display: block;

  position: absolute;

  top: 0;

  left: 0;

  height: 60px;

  width: 100px;

 

  -webkit-transform: rotate(90deg);

     -moz-transform: rotate(90deg);

       -o-transform: rotate(90deg);

          transform: rotate(90deg);

  -webkit-animation: spin-3 2s linear infinite;

     -moz-animation: spin-3 2s linear infinite;

       -o-animation: spin-3 2s linear infinite;

          animation: spin-3 2s linear infinite;

}

 

.pace .pace-activity {

  font-size: 15px;

  line-height: 1;

  z-index: 2000;

  position: absolute;

  height: 60px;

  width: 100px;

 

  display: block;

}

 

.pace .pace-activity:before {

  border-radius: 50%;

  border: 5px solid #29d;

  content: ' ';

  display: block;

  position: absolute;

  top: 0;

  left: 0;

  height: 60px;

  width: 100px;

 

  -webkit-animation: spin-1 2s linear infinite;

     -moz-animation: spin-1 2s linear infinite;

       -o-animation: spin-1 2s linear infinite;

          animation: spin-1 2s linear infinite;

}

 

.pace .pace-activity:after{

  border-radius: 50%;

  border: 5px solid #29d;

  content: ' ';

  display: block;

  position: absolute;

  top: 0;

  left: 0;

  height: 60px;

  width: 100px;

 

  -webkit-transform: rotate(45deg);

     -moz-transform: rotate(45deg);

       -o-transform: rotate(45deg);

          transform: rotate(45deg);

  -webkit-animation: spin-2 2s linear infinite;

     -moz-animation: spin-2 2s linear infinite;

       -o-animation: spin-2 2s linear infinite;

          animation: spin-2 2s linear infinite;

}

 

@-webkit-keyframes spin-1 {

  0%  { -webkit-transform: rotate(0deg); }

  100%{ -webkit-transform: rotate(359deg);}

}

@-moz-keyframes spin-1 {

  0%  { -moz-transform: rotate(0deg); }

  100%{ -moz-transform: rotate(359deg);}

}

@-o-keyframes spin-1 {

  0%  { -o-transform: rotate(0deg); }

  100%{ -o-transform: rotate(359deg);}

}

@keyframes spin-1 {

  0%  { transform: rotate(0deg); }

  100%{ transform: rotate(359deg);}

}

 

@-webkit-keyframes spin-2 {

  0%  { -webkit-transform: rotate(59.8deg); }

  100%{ -webkit-transform: rotate(418.8deg);}

}

@-moz-keyframes spin-2 {

  0%  { -moz-transform: rotate(59.8deg); }

  100%{ -moz-transform: rotate(418.8deg);}

}

@-o-keyframes spin-2 {

  0%  { -o-transform: rotate(59.8deg); }

  100%{ -o-transform: rotate(418.8deg);}

}

@keyframes spin-2 {

  0%  { transform: rotate(59.8deg); }

  100%{ transform: rotate(418.8deg);}

}

 

@-webkit-keyframes spin-3 {

  0%  { -webkit-transform: rotate(119.6deg); }

  100%{ -webkit-transform: rotate(478.6deg);}

}

@-moz-keyframes spin-3 {

  0%  { -moz-transform: rotate(119.6deg); }

  100%{ -moz-transform: rotate(478.6deg);}

}

@-o-keyframes spin-3 {

  0%  { -o-transform: rotate(119.6deg); }

  100%{ -o-transform: rotate(478.6deg);}

}

@keyframes spin-3 {

  0%  { transform: rotate(119.6deg); }

  100%{ transform: rotate(478.6deg);}

}



Tema Radar Loading


Demo
click to view


.pace {

  -webkit-pointer-events: none;

  pointer-events: none;

 

  z-index: 2000;

  position: fixed;

  height: 90px;

  width: 90px;

  margin: auto;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

}

 

.pace.pace-inactive .pace-activity {

  display: none;

}

 

.pace .pace-activity {

  position: fixed;

  z-index: 2000;

  display: block;

  position: absolute;

  left: -30px;

  top: -30px;

  height: 90px;

  width: 90px;

  display: block;

  border-width: 30px;

  border-style: double;

  border-color: #29d transparent transparent;

  border-radius: 50%;

 

  -webkit-animation: spin 1s linear infinite;

     -moz-animation: spin 1s linear infinite;

       -o-animation: spin 1s linear infinite;

          animation: spin 1s linear infinite;

}

 

.pace .pace-activity:before {

  content: ' ';

  position: absolute;

  top: 10px;

  left: 10px;

  height: 50px;

  width: 50px;

  display: block;

  border-width: 10px;

  border-style: solid;

  border-color: #29d transparent transparent;

  border-radius: 50%;

}

 

 

@-webkit-keyframes spin {

  100% { -webkit-transform: rotate(359deg); }

}

 

@-moz-keyframes spin {

  100% { -moz-transform: rotate(359deg); }

}

 

@-o-keyframes spin {

  100% { -moz-transform: rotate(359deg); }

}

 

@keyframes spin {

  100% {  transform: rotate(359deg); }

}




Tema Simple Loading


Demo
click to view



.pace {

  -webkit-pointer-events:
none;

  pointer-events:
none;

  -webkit-user-select:
none;

  -moz-user-select: none;

  user-select:
none;


  z-index: 2000;

  position:
fixed;

  margin: auto;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  height: 5px;

  width: 200px;

  background:
#fff;

  border: 1px
solid #29d;

}


.pace .pace-progress {

  -webkit-box-sizing:
border-box;

  -moz-box-sizing:
border-box;

  -ms-box-sizing:
border-box;

  -o-box-sizing:
border-box;

  box-sizing:
border-box;


  -webkit-transition:
width 1s ease-in-out 1s linear;

  -moz-transition:
width 1s ease-in-out 1s linear;

  -ms-transition:
width 1s ease-in-out 1s linear;

  -o-transition:
width 1s ease-in-out 1s linear;

  transition:
width 1s ease-in-out 1s linear;


  -webkit-transform:
translate3d(0, 0, 0);

  -moz-transform:
translate3d(0, 0, 0);

  -ms-transform:
translate3d(0, 0, 0);

  -o-transform:
translate3d(0, 0, 0);

  transform:
translate3d(0, 0, 0);


  max-width:
200px;

  position:
fixed;

  z-index: 2000;

  display: block;

  position:
absolute;

  left: 0px;

  top: 0px;

  height: 100%;

  background:
#29d;

}


.pace.pace-inactive {

  display: none;

}


6. Setelah Anda copy salah satu dari tema, lalu paste script tersebut tepat di atas kode ]]></b:skin> atau </style>,


7. Lalu setelah itu cari kode </head> dengan cara
Ctrl
+
F
,
8. Copy script di bawah ini, lalu paste tepat diatas kode </head>,

<script src='https://arlina-design.googlecode.com/svn/progressbar.js'/>

 9. Simpan Template.



Nah itu saja dari Saya, semoga bermanfaat, jangan lupa share dan tinggalkan komentar Anda, terima kasih.


Referensi Kode http://arlinadesign.blogspot.com/2014/11/memasang-progress-bar-di-blog.html

Share this

Renaldy Rizki Ramadani

I'm CEO & Founder in https://ilmumalas.blogspot.com & https://renaldyways.blogspot.com/


Artikel Menarik Lainnya

Artikel Selanjutnya
Artikel Selanjutnya
Artikel Sebelumnya
Artikel Sebelumnya
Cara style text di komentar Disqus dan Blogger:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
  • Untuk menggunakan emoji di bawah ini cukup copy kode tersebut dan beri jarak 1 spasi untuk menampilkan emoji pada kolom komentar Blogger.
Parser Kode
FAQ
Emotikon
Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

7 Comments

Anonymous
Balas Hapus
Anonymous 6 December 2014 at 23:03

gan kasih demonya dong :sm:

Renaldy Rizki Ramadani
Balas Hapus
Renaldy Rizki Ramadani 6 December 2014 at 23:05

Ok gan :v

Jun
Balas Hapus
Jun 23 February 2015 at 14:33

waduh baru lihat nih ijin copas ya gan ! tpi tenang sourcenya aman :iloveindonesia
mau dipake juga nih , minat banget yg ginian

Renaldy Rizki Ramadani
Balas Hapus
Renaldy Rizki Ramadani 25 February 2015 at 13:39

wokeh gan :2thumbup minta link blog agan dong ane mau cek :iloveindonesia

fadhilakbarblogger
Balas Hapus
fadhilakbarblogger 5 March 2015 at 17:58

keren gan :winner

Unknown
Balas Hapus
Unknown 12 August 2015 at 06:50

wah keren banget deh beneran...
ada priview nya juga. saya suka yang atom. kereeeennnn...
makasih gan.
mampir ke blog saya juga ya gan...
:2thumbup

Renaldy Rizki Ramadani
Balas Hapus
Renaldy Rizki Ramadani 14 August 2015 at 13:12

yoi gan sama2 :2thumbup

Subscribe to: Post Comments (Atom)