Kembali ke Portfolio renaldyrr.com
Kembali ke Portfolio

Kumpulan Loading Progress Keren Untuk Blog

Renaldy Rizki Ramadani 3 menit baca 7 komentar
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
tamat ✦
Bagikan
Topik
Catatan pinggir

Obrolan pembaca 7

Punya pengalaman serupa, pertanyaan, atau koreksi? Tulis di pinggir halaman ini. Setiap catatan dibaca langsung oleh penulis.

Bingung mau mulai dari mana? Ketuk salah satu, lalu tempel di kolom komentar:

Comments

  1. Anonymous6 December 2014 at 23:03

    gan kasih demonya dong :sm:

    ReplyDelete
    Replies
    1. Renaldy Rizki Ramadani6 December 2014 at 23:05

      Ok gan :v

      Delete
    2. Jun23 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

      Delete
    3. Renaldy Rizki Ramadani25 February 2015 at 13:39

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

      Delete
  2. fadhilakbarblogger5 March 2015 at 17:58

    keren gan :winner

    ReplyDelete
  3. Unknown12 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

    ReplyDelete

Post a Comment

  • Sopan & saling menghargai
  • Tanpa link promosi atau spam
  • Komentar yang melanggar akan dihapus

Cari tulisan

Blogging Internet Smartphone Peta tulisan →

Pantau tulisan baru

Paspor Pembacaku

Setiap kali kamu membaca sebuah tulisan sampai tanda tamat ✦, topiknya mendapat stempel. Kumpulkan semuanya untuk menjadi Penjelajah Arsip.

Data paspor disimpan di browser-mu sendiri, tidak dikirim ke mana pun.