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

I'm CEO & Founder in http://caritema.com & http://renaldyways.blogspot.com/


Artikel Menarik Lainnya

Artikel Selanjutnya
Next Post
Artikel Sebelumnya
Previous Post
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

8 Comments

Khoazis 6 December 2014 at 23:03

gan kasih demonya dong :sm:

Renaldy Ramadani 6 December 2014 at 23:05

Ok gan :v

jun cikal 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 Ramadani 25 February 2015 at 13:39

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

fadhilakbarblogger 5 March 2015 at 17:58

keren gan :winner

Renaldy Ramadani 6 March 2015 at 13:33

:2thumbup yoi gan

Prana Jomantara 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 Ramadani 14 August 2015 at 13:12

yoi gan sama2 :2thumbup