Progress Bar in Blog
Effect of
loading progress bar will appear when the page is in the process of loading the
blog page and disappear when the page has finished loading.
1.First Open
bloggers> Template> Edit HTML> Copy the code below and apply this
before
</
head>
<script src='https://arlina-design.googlecode.com/svn/progressbar.js'/>
2.Then apply
the given following code following code before
</
style>
Please
chose CSS below according to your taste.
Barber Shop
.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%, 25% transparent, transparent 50%, rgba (255, 255, 255, 0.2) 50%, rgba (255 , 255, 255, 0.2) 75%, 75% transparent, transparent);
background-image: -moz-linear-gradient (45deg, rgba (255, 255, 255, 0.2) 25%, 25% transparent, transparent 50%, rgba (255, 255, 255, 0.2) 50%, rgba (255 , 255, 255, 0.2) 75%, 75% transparent, transparent);
background-image: -o-linear-gradient (45deg, rgba (255, 255, 255, 0.2) 25%, 25% transparent, transparent 50%, rgba (255, 255, 255, 0.2) 50%, rgba (255 , 255, 255, 0.2) 75%, 75% transparent, transparent);
background-image: linear-gradient (45deg, rgba (255, 255, 255, 0.2) 25%, 25% transparent, transparent 50%, rgba (255, 255, 255, 0.2) 50%, rgba (255, 255, 255, 0.2) 75%, 75% transparent, 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); }
}
Mac OSX
.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), 0 1px inset rgba (0, 0, 0, 0.3), 0 2px inset 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), 0 1px inset rgba (0, 0, 0, 0.3), 0 2px inset 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), 0 1px inset rgba (0, 0, 0, 0.3), 0 2px inset 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), 0 1px inset rgba (0, 0, 0, 0.3), 0 2px inset 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); }
}
Flat Top
.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);
}
Big Counter
.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, .19999999999999996);
}
Big Corner
.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: transform latex (100%) translateY (-100%) rotate (45deg);
transform: transform latex (100%) translateY (-100%) rotate (45deg);
pointer-events: none;
}
.pace.pace-active .pace-activity {
-webkit-transform: transform latex (50%) translateY (-50%) rotate (45deg);
transform: transform latex (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, 0.2);
border-left-color: rgba (0, 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, 0.2);
border-bottom-color: rgba (0, 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); }
}
Bounce
.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, 0.1);
box-shadow: 0 0 20px 35px rgba (20, 20, 20, 0.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, 0.1);
box-shadow: 0 0 20px 35px rgba (20, 20, 20, 0.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, 0.3);
box-shadow: 0 0 20px 35px rgba (20, 20, 20, 0.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, 0.1);
box-shadow: 0 0 20px 35px rgba (20, 20, 20, 0.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, 0.3);
box-shadow: 0 0 20px 35px rgba (20, 20, 20, 0.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, 0.1);
box-shadow: 0 0 20px 35px rgba (20, 20, 20, 0.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, 0.3);
box-shadow: 0 0 20px 35px rgba (20, 20, 20, 0.3);
border-radius: 20px / 20px;
animation-timing-function: ease-out;
}
}
Loading Bar
.pace {
-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-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-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: 12px;
left: 0;
right: 0;
bottom: 0;
width: 200px;
height: 25px;
border: 2px solid #29d;
background-color: #fff;
}
.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-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-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);
transform: translate3d(0, 0, 0);
max-width: 190px;
position: fixed;
z-index: 2000;
display: block;
position: absolute;
left: 3px;
top: 3px;
height: 15px;
font-size: 12px;
background: #29d;
color: #29d;
line-height: 60px;
font-weight: bold;
font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
}
.pace .pace-progress:after {
content: attr(data-progress-text);
display: inline-block;
}
.pace.pace-inactive {
display: none;
}
Center
Circle
.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);
}
}
Circle Atom
.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);}
}
Center Radar
.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); }
}
Center Simple
.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;
}
