How to create Youtube like Progress bar for blogger?

Hi friends in this post i am sharing how to create youtube like progress bar for blogger.Not only with this ,we have given a lot of more progress bar to blogger.Pace.js  is an opensource javascript plugin which helps to make the loading bar (or) progress bar.And we are going to see how to use pace.js in blogger and loading progress bar successfully.


progressbar-macosx

How to host pace.js in google drive and get the streaming link?

First download pacejs  file from  "https://www.dropbox.com/s/uiu3ua51mu0ncxh/pace.js?dl=0".
Now upload this file to your google drive account.
Change sharing settings to "Public on the web".You wil get link.If you forgot to get the link.Once again  click the file and right click on it choose "Share".Now you will get the link .In the link get the file id .
For example.
  https://drive.google.com/file/d/0Byde2iOkYelrV1I1VlUwVnlHVXc/view?usp=sharing
Take only 0Byde2iOkYelrV1I1VlUwVnlHVXc (i.e)The id is present  in between "d/" and "/view"
Now add the file id like below,
<script src='https://googledrive.com/host/0Byde2iOkYelrV1I1VlUwVnlHVXc' type='text/javascript'/>
That's all friends now you got the streaming link of pace.js

How to Add Pace.js streaming link in blogger?


Now goto blogger template.Then click edit HTML.
Find <head>.Place <script src='https://googledrive.com/host/0Byde2iOkYelrV1I1VlUwVnlHVXc' type='text/javascript'/> just below <head>


How to create you tube like progress bar for blogger?


Now copy the below css code, goto blogger and paste it in just above ]]> </b:skin>

.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: red;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}
If you want to change the color replace “red” with your html color codes.You can change the height 2px ,if you want to enlarge the progress bar.

Create Flash loading bar for blogger

Copy the below css code, goto blogger and paste it in just above ]]> </b:skin> .Keep in mind friends use only one css code loading bar to blogger.If you already running youtube progress bar and now want to use flash loading bar means first remove the css of youtube progress bar then paste the flash loadbar css code

.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;
  right: 100%;
  width: 100%;
  height: 2px;
}
.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); }
}

Gmail like progress bar for blogger

Copy the below css code, goto blogger and paste it in just above ]]> </b:skin>

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

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

  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 100%;
  height: 12px;
  background: #fff;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background-color: #29d;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 100%;
  overflow: hidden;
}

.pace .pace-activity {
  position: fixed;
  top: 0;
  right: -32px;
  bottom: 0;
  left: 0;

  -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);

  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-theme-barber-shop-motion 500ms linear infinite;
  -moz-animation: pace-theme-barber-shop-motion 500ms linear infinite;
  -ms-animation: pace-theme-barber-shop-motion 500ms linear infinite;
  -o-animation: pace-theme-barber-shop-motion 500ms linear infinite;
  animation: pace-theme-barber-shop-motion 500ms linear infinite;
}

@-webkit-keyframes pace-theme-barber-shop-motion {
  0% { -webkit-transform: none; transform: none; }
  100% { -webkit-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-moz-keyframes pace-theme-barber-shop-motion {
  0% { -moz-transform: none; transform: none; }
  100% { -moz-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-o-keyframes pace-theme-barber-shop-motion {
  0% { -o-transform: none; transform: none; }
  100% { -o-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-ms-keyframes pace-theme-barber-shop-motion {
  0% { -ms-transform: none; transform: none; }
  100% { -ms-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@keyframes pace-theme-barber-shop-motion {
  0% { transform: none; transform: none; }
  100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
}

MacOSX like progress bar for blogger

Copy the below css code, goto blogger and paste it in just above ]]> </b:skin>

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

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

  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 100%;
  height: 12px;
  background: #fff;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background-color: #0087E1;
  position: fixed;
  top: 0;
  right: 100%;
  width: 100%;
  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 #00558F, inset 0 -1px #00558F, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
  -moz-box-shadow: inset -1px 0 #00558F, inset 0 -1px #00558F, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
  -o-box-shadow: inset -1px 0 #00558F, inset 0 -1px #00558F, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
  box-shadow: inset -1px 0 #00558F, inset 0 -1px #00558F, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
}

.pace .pace-activity {
  position: fixed;
  top: 0;
  left: 0;
  right: -28px;
  bottom: 0;

  -webkit-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);
  -moz-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);
  -o-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);
  background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);

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

  -webkit-animation: pace-theme-mac-osx-motion 500ms linear infinite;
  -moz-animation: pace-theme-mac-osx-motion 500ms linear infinite;
  -ms-animation: pace-theme-mac-osx-motion 500ms linear infinite;
  -o-animation: pace-theme-mac-osx-motion 500ms linear infinite;
  animation: pace-theme-mac-osx-motion 500ms linear infinite;
}

@-webkit-keyframes pace-theme-mac-osx-motion {
  0% { -webkit-transform: none; transform: none; }
  100% { -webkit-transform: translate(-28px, 0); transform: translate(-28px, 0); }
}
@-moz-keyframes pace-theme-mac-osx-motion {
  0% { -moz-transform: none; transform: none; }
  100% { -moz-transform: translate(-28px, 0); transform: translate(-28px, 0); }
}
@-o-keyframes pace-theme-mac-osx-motion {
  0% { -o-transform: none; transform: none; }
  100% { -o-transform: translate(-28px, 0); transform: translate(-28px, 0); }
}
@-ms-keyframes pace-theme-mac-osx-motion {
  0% { -ms-transform: none; transform: none; }
  100% { -ms-transform: translate(-28px, 0); transform: translate(-28px, 0); }
}
@keyframes pace-theme-mac-osx-motion {
  0% { transform: none; transform: none; }
  100% { transform: translate(-28px, 0); transform: translate(-28px, 0); }
}

Youtube like progress bar for blogger

Copy the below css code, goto blogger and paste it in just above ]]> </b:skin>


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

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

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  -webkit-transform: translate3d(0, -50px, 0);
  -ms-transform: translate3d(0, -50px, 0);
  transform: translate3d(0, -50px, 0);

  -webkit-transition: -webkit-transform .5s ease-out;
  -ms-transition: -webkit-transform .5s ease-out;
  transition: transform .5s ease-out;
}

.pace.pace-active {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.pace .pace-progress {
  display: block;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 10px;
  background: #29d;

  pointer-events: none;
}


Big counter progress bar for blogger

Copy the below css code, goto blogger and paste it in just above ]]> </b:skin>

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

  -webkit-transform: translate3d(0, 0, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

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

Corner indicator progress bar for blogger

Copy the below css code, goto blogger and paste it in just above ]]> </b:skin>

.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 {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    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-theme-corner-indicator-spin 3s linear infinite;
    animation: pace-theme-corner-indicator-spin 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-theme-corner-indicator-spin 1s linear infinite;
    animation: pace-theme-corner-indicator-spin 1s linear infinite;
}

@-webkit-keyframes pace-theme-corner-indicator-spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(359deg); }
}
@keyframes pace-theme-corner-indicator-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}

Bounce progress bar for blogger

Copy the below css code, goto blogger and paste it in just above ]]> </b:skin>

.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) !important;
  -moz-transform: scaleY(.3) !important;
  -ms-transform: scaleY(.3) !important;
  -o-transform: scaleY(.3) !important;
  transform: scaleY(.3) !important;
  -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;
  }
}

Fill effect progress bar for blogger

Note:Use this progress bar only if your blogger template has glassy effect between wrapper and post content .In Other blogger templates also this code works but due to non glassy effects it looks like not working.Copy the below css code, goto blogger and paste it in just above ]]> </b:skin>


.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: rgba(0, 0, 0, 0.19999999999999996);
  position: fixed;
  z-index: -1;
  top: 0;
  right: 100%;
  bottom: 0;
  width: 100%;
}
Print Friendly and PDF
SHARE

About me

Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.

    Blogger Comment
    Facebook Comment

0 comments :

Post a Comment