So I wanted to copy a animated loading bar from here: https://www.cssscript.com/demo/animated-progress-bar-component-with-pure-css/
But my loading bar is not animating.
What's wrong with it?
.loading-bar {
height: 18px;
width: 100%;
position: relative;
overflow: hidden;
width: 100%;
font-family: "Roboto", sans-serif;
background-color: #EEE;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
}
.loading-bar-animation {
transition: none 0s ease 0s;
width: 100%;
height: 18px;
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);
background-size: 35px 35px;
box-shadow: inset 0px -1px 2px rgba(0, 0, 0, 0.1);
background-color: #aaa;
-webkit-animation: cssProgressActive 2s linear infinite;
animation: cssProgressActive 2s linear infinite;
}
<div class="loading-bar">
<div class="loading-bar-animation">
</div>
</div>
You forgot to add the animation to the CSS script.
.loading-bar {
height: 18px;
width: 100%;
position: relative;
overflow: hidden;
width: 100%;
font-family: "Roboto", sans-serif;
background-color: #EEE;
box-shadow: inset 0px 1px 3px rgba(0,0,0,0.2);
}
.loading-bar-animation {
transition: none 0s ease 0s;
width: 100%;
height: 18px;
background-image: -webkit-linear-gradient(135deg, rgba(255,255,255,0.125) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.125) 50%, rgba(255,255,255,0.125) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255,255,255,0.125) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.125) 50%, rgba(255,255,255,0.125) 75%, transparent 75%, transparent);
background-size: 35px 35px;
box-shadow: inset 0px -1px 2px rgba(0,0,0,0.1);
background-color: #aaa;
-webkit-animation: cssProgressActive 2s linear infinite;
animation: cssProgressActive 2s linear infinite;
}
/* Must Include the animation below */
#-webkit-keyframes cssProgressActive {
0% {
background-position:0 0
}
100% {
background-position:35px 35px
}
}
#keyframes cssProgressActive {
0% {
background-position:0 0
}
100% {
background-position:35px 35px
}
}
#-webkit-keyframes cssProgressActiveRight {
0% {
background-position:0 0
}
100% {
background-position:-35px -35px
}
}
#keyframes cssProgressActiveRight {
0% {
background-position:0 0
}
100% {
background-position:-35px -35px
}
}
<!DOCTYPE html>
<html>
<head>
<title>CSS Loading Bar</title>
</head>
<body>
<div class="loading-bar">
<div class="loading-bar-animation">
</div>
</body>
</html>
Your say that .loading-bar-animation has the animation cssProgressActive. Problem is that you don't define this animation. After research this animation is this one and is normaly defined in the cssProgress.css file. Are you sure that you have imported it ?
.loading-bar {
height: 18px;
width: 100%;
position: relative;
overflow: hidden;
width: 100%;
font-family: "Roboto", sans-serif;
background-color: #EEE;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
}
.loading-bar-animation {
transition: none 0s ease 0s;
width: 100%;
height: 18px;
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);
background-size: 35px 35px;
box-shadow: inset 0px -1px 2px rgba(0, 0, 0, 0.1);
background-color: #aaa;
-webkit-animation: cssProgressActive 2s linear infinite;
animation: cssProgressActive 2s linear infinite;
}
#keyframes cssProgressActive {
0% {
background-position:0 0
}
100% {
background-position:35px 35px
}
}
<div class="loading-bar">
<div class="loading-bar-animation">
</div>
</div>
I think you didn't include the CSS and your wrappers are not set properly.
Here how to make it work:
.loading-bar {
height: 18px;
width: 100%;
position: relative;
overflow: hidden;
width: 100%;
font-family: "Roboto", sans-serif;
background-color: #EEE;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
}
.loading-bar-animation {
transition: none 0s ease 0s;
width: 100%;
height: 18px;
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);
background-size: 35px 35px;
box-shadow: inset 0px -1px 2px rgba(0, 0, 0, 0.1);
background-color: #aaa;
-webkit-animation: cssProgressActive 2s linear infinite;
animation: cssProgressActive 2s linear infinite;
}
<link rel="stylesheet" href="https://www.cssscript.com/demo/animated-progress-bar-component-with-pure-css/assets/css/cssProgress.css">
<div class="cssProgress">
<div class="progress1">
<div class="loading-bar">
<div class="loading-bar-animation">
</div>
</div>
</div>
</div>
You forgot to copy the animation
#-webkit-keyframes
cssProgressActive { 0% {
background-position:0 0
}
100% {
background-position:35px 35px
}
}
#keyframes
cssProgressActive { 0% {
background-position:0 0
}
100% {
background-position:35px 35px
}
}
.loading-bar {
height: 18px;
width: 100%;
position: relative;
overflow: hidden;
width: 100%;
font-family: "Roboto", sans-serif;
background-color: #EEE;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
}
.loading-bar-animation {
transition: none 0s ease 0s;
width: 100%;
height: 18px;
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);
background-size: 35px 35px;
box-shadow: inset 0px -1px 2px rgba(0, 0, 0, 0.1);
background-color: #aaa;
-webkit-animation: cssProgressActive 2s linear infinite;
animation: cssProgressActive 2s linear infinite;
}
<div class="cssProgress">
<div class="progress1">
<div class="loading-bar">
<div class="loading-bar-animation">
</div>
</div>
</div>
</div>
Related
I have a gradient progress bar. My code is as follows:
CSS:
.progressbar {
height: 15px;
border-radius: 1em;
margin:5px;
background:
linear-gradient(-45deg,
rgba(255, 255, 255, 0.15) 25%,transparent 25%,
transparent 50%, rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,transparent 75%)
left/30px 30px repeat-x,
linear-gradient(to right, red 0%, yellow 50%, green 100%) left/var(--p,100%) fixed,
lightgray;
box-shadow:inset 0px -2px 5px rgba(0, 0, 0, 0.5);
animation: change 1s linear infinite;
}
#keyframes change {
from {background-position:0 0,left}
to {background-position:30px 0,left}
}
HTML:
<div class="progressbar" style="width:80%;"></div>
I want to keep it as gradient bar only but just want to change shape of progress bar. I want shape of progress bar as arrow as shown in image attached.How I can change shape of progress bar? .
It's a difficult one, and this workaround will not work if you don't use a solid background. But here's the trick done with pseudo elements. Hope it helps.
More info about CSS triangles here.
.progressbar {
position: relative; /* for position absolute of pseudo element work */
height: 56px;
margin:5px;
background:
linear-gradient(-45deg,
rgba(255, 255, 255, 0.15) 25%,transparent 25%,
transparent 50%, rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,transparent 75%)
left/30px 30px repeat,
linear-gradient(to right, red 0%, yellow 50%, green 100%) left/var(--p,100%) fixed,
lightgray;
box-shadow:inset 0px -2px 5px rgba(0, 0, 0, 0.5);
animation: change 1s linear infinite;
}
.progressbar:after {
content: "";
position: absolute;
right: 0;
width: 0;
height: 0;
border-top: 28px solid white; /* Your background color*/
border-bottom: 28px solid white; /* Your background color*/
border-left: 28px solid transparent;
}
.progressbar:before {
content: "";
position: absolute;
left: 0;
width: 0;
height: 0;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
border-left: 28px solid white; /* Your background color*/
}
#keyframes change {
from {background-position:0 0,left}
to {background-position:30px 0,left}
}
<div class="progressbar" style="width:80%;"></div>
I'm trying to animate a rotating gold ray of lights, below image is the achieved layout using html and css but when I tried to add a rotate animation, seems layout cut on half. Below code snippet is what is my attempt. Any help, ideas is greatly appreciated.
#import('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css');
body {
background: #ededed;
padding: 64px 0;
font-family: Roboto, sans-serif;
font-size: 12px
}
.banner {
max-width: 100%;
max-height: 100%;
-webkit-box-shadow: 0 10px 40px -6px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 10px 40px -6px rgba(0, 0, 0, .1);
-o-box-shadow: 0 10px 40px -6px rgba(0, 0, 0, .1);
box-shadow: 0 10px 40px -6px rgba(0, 0, 0, .1)
}
.winners-intro {
background: #ededed;
z-index: 999
}
.winners-intro,
.winners-intro .winners-light {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0
}
.winners-intro .winners-light {
-webkit-animation-name: winners_light;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
animation-name: winners_light;
animation-duration: 10s;
animation-iteration-count: infinite
}
.winners-intro .winners-light .radial-light {
width: 100px;
height: 100px;
background: gold;
box-shadow: 1px 1px 100px 50px gold;
-webkit-box-shadow: 1px 1px 100px 50px gold;
-moz-box-shadow: 1px 1px 100px 50px gold;
-o-box-shadow: 1px 1px 100px 50px gold;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: absolute
}
.winners-intro .winners-light .light {
position: absolute;
background: gold;
height: 200vh;
width: 20px;
opacity: .5;
background: transparent;
background: -webkit-linear-gradient(bottom, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent);
background: linear-gradient(0deg, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent)
}
.winners-intro .winners-light .light:nth-child(2) {
transform: skewX(30deg)
}
.winners-intro .winners-light .light:nth-child(2),
.winners-intro .winners-light .light:nth-child(3) {
background: transparent;
background: -webkit-linear-gradient(bottom, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent);
background: linear-gradient(0deg, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent)
}
.winners-intro .winners-light .light:nth-child(3) {
transform: skewX(60deg)
}
.winners-intro .winners-light .light:nth-child(4) {
transform: skewX(90deg)
}
.winners-intro .winners-light .light:nth-child(4),
.winners-intro .winners-light .light:nth-child(6) {
background: transparent;
background: -webkit-linear-gradient(bottom, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent);
background: linear-gradient(0deg, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent)
}
.winners-intro .winners-light .light:nth-child(6) {
transform: skewX(-30deg)
}
.winners-intro .winners-light .light:nth-child(7) {
transform: skewX(-60deg);
background: transparent;
background: -webkit-linear-gradient(bottom, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent);
background: linear-gradient(0deg, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent)
}
.winners-intro .winners-light .light:nth-child(8) {
width: 100%!important;
height: 10px!important;
background: transparent;
background: -webkit-linear-gradient(left, transparent 10%, gold 50%, transparent 90%, transparent);
background: linear-gradient(90deg, transparent 10%, gold 50%, transparent 90%, transparent)
}
.winners-intro .winners-trophy {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 10
}
#-webkit-keyframes winners_light {
to {
transform: rotate(-1turn)
}
}
#keyframes clouds {
to {
transform: rotate(-1turn)
}
}
<div class="winners-intro">
<div>
<div class="winners-light">
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="radial-light"></div>
</div>
</div>
</div>
I would simplify the code like below where you will not have the issue:
body {
background: #ededed;
margin:0;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
height:100vh;
}
.light {
height: 100vmax;
width:100vmax;
background:
radial-gradient(circle ,rgba(255, 215, 0, 1 ) 8vmax,transparent 8vmax),
radial-gradient(circle ,rgba(255, 215, 0, 0.6)8vmax,transparent 17vmax),
linear-gradient(to bottom, transparent 10%,gold,transparent 90%) center/10px 100%,
linear-gradient(to right , transparent 10%,gold,transparent 90%) center/100% 10px;
background-repeat:no-repeat;
position:relative;
overflow:hidden;
animation:move 5s linear infinite;
}
.light:before,
.light:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:inherit;
background-size:0 0,0 0,10px 100%,100% 10px;
transform:rotate(30deg);
}
.light:after{
transform:rotate(-30deg);
}
#keyframes move {
to {
transform:rotate(1turn);
}
}
<div class="light"></div>
I'm working on a ticket shape div, my problem is that I can't move the circles to the position I want.
I'm following this code:
* {
box-sizing: border-box;
}
body {
padding: 2em;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
background-color: #ff4500;
-webkit-animation: bg 10s linear infinite alternate;
animation: bg 10s linear infinite alternate;
color: rgba(0, 0, 0, 0.25);
font-size: 13px;
}
a {
color: rgba(0, 0, 0, 0.35);
}
.ticket {
display: inline-block;
box-sizing: content-box;
-webkit-filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
position: relative;
height: 1em;
padding: 1em;
color: #000;
font-size: 16px;
background-size: 51% 100%;
background-repeat: no-repeat;
background-image: radial-gradient(circle at 0 50%, rgba(255, 255, 224, 0) 0.4em, #ffffe0 0.5em), radial-gradient(circle at 100% 50%, rgba(255, 255, 224, 0) 0.4em, #ffffe0 0.5em);
background-position: top left, top right;
}
#-webkit-keyframes bg {
0% {
background-color: #ff4500;
}
50% {
background-color: #b0e0e6;
}
100% {
background-color: #ff4500;
}
}
#keyframes bg {
0% {
background-color: #ff4500;
}
50% {
background-color: #b0e0e6;
}
100% {
background-color: #ff4500;
}
}
<span class="ticket">Ticket shape with transparent holes punched!</span>
<br />
<br />
<p>Based on Lea Verou's faux inset border-radius technique.</p>
What I want is move the circles to the top left and bottom left of the div.
The problem
The problem is that the first background is being displayed over the top of the second background, you can move the position of the circle but it is hidden.
To fix
You can achieve this by making the following changes:
background-size: 51% 100%; to background-size: 100% 50%; to make the background take up half of the height instead of the width
background-position: top left, top right; to background-position: top left, bottom left; to position the backgrounds at the top and bottom
background-image: radial-gradient(circle at 0 50%, rgba(255,255,224,0) 0.4em, #ffffe0 0.5em), radial-gradient(circle at 100% 50%, rgba(255,255,224,0) 0.4em, #ffffe0 0.5em); to background-image: radial-gradient(circle at 0 0, rgba(255, 255, 224, 0) 0.4em, #ffffe0 0.5em), radial-gradient(circle at 0 100%, rgba(255, 255, 224, 0) 0.4em, #ffffe0 0.5em); to position the radial gradient at the top and bottom of the backgrounds
* {
box-sizing: border-box;
}
body {
padding: 2em;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
background-color: #ff4500;
-webkit-animation: bg 10s linear infinite alternate;
animation: bg 10s linear infinite alternate;
color: rgba(0, 0, 0, 0.25);
font-size: 13px;
}
a {
color: rgba(0, 0, 0, 0.35);
}
.ticket {
display: inline-block;
box-sizing: content-box;
-webkit-filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
position: relative;
height: 1em;
padding: 1em;
color: #000;
font-size: 16px;
background-size: 100% 50%;
background-repeat: no-repeat;
background-image: radial-gradient(circle at 0 0, rgba(255, 255, 224, 0) 0.4em, #ffffe0 0.5em), radial-gradient(circle at 0 100%, rgba(255, 255, 224, 0) 0.4em, #ffffe0 0.5em);
background-position: top left, bottom left;
}
#-webkit-keyframes bg {
0% {
background-color: #ff4500;
}
50% {
background-color: #b0e0e6;
}
100% {
background-color: #ff4500;
}
}
#keyframes bg {
0% {
background-color: #ff4500;
}
50% {
background-color: #b0e0e6;
}
100% {
background-color: #ff4500;
}
}
<span class="ticket">Ticket shape with transparent holes punched!</span>
<br />
<br />
<p>Based on Lea Verou's faux inset border-radius technique.</p>
you can use the below property for positioning change.
background-image radial-gradient(circle at 0 50%, rgba($bg,0) $hole, $bg ($hole + .1em)), radial-gradient(circle at 100% 50%, rgba($bg,0) $hole, $bg ($hole + .1em))
I have been devloping a website but can not get a progress bar of any sorts to load in Internet Explorer. I tried both the basic progress bar in html, as well as a more complex CSS one, both of which did not work. I have 3 scripts, the first of which is the html code for the basic progress bar, as well as 4 of the more complex ones. The second script is the CSS styling for the more complex bar. Finally I have my run file which is used to live update the site I am working on. I am running the site on Apache 2.4.10 and it functions properly in both Firefox and Google Chrome. When trying in Internet Explorer, all that loads is a single black rectangle, instead of 4 actual bars, and one of the smaller progress bars. Please let me know if you see the flaw in my code or if you have the fix to the problem.
This is the HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="progressbarstyle.css">
</head>
<title> Test</title>
<style type="text/css">
</style>
</head>
<body>
<progress max="100" value="10"></progress><br/>
<div class="meter red">
<span id="progress-load" style="height: 60%" > </span>
</div>
<div class="meter red">
<span id="progress-load" style="height: 60%" > </span>
</div>
<div class="meter red">
<span id="progress-load" style="height: 40%" > </span>
</div>
<div class="meter red">
<span id="progress-load" style="height: 50%" > </span>
</div>
</body>
</html>
<script>
This is the CSS
p {color: white;
background-color: black;}
body {background-color: #F5F5DC; }
.meter {
float: left;
height: 500px;
width: 50px;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
position:relative;
overflow: hidden;
}
.progress-load {
display: block;
height: 100%;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: -webkit-gradient(
linear,
center right,
center right,
color-stop(0, rgb(43,194,83)),
color-stop(1, rgb(84,240,84))
);
background-image: -webkit-linear-gradient(
center right,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
background-image: -moz-linear-gradient(
center right,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
background-image: -ms-linear-gradient(
center right,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
background-image: -o-linear-gradient(
center right,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
-webkit-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
-moz-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
overflow: hidden;
position:absolute;
left: 0;
bottom: 0;
width: 100%;
}
.red > span {
background-color: #f0a3a3;
background-image: -webkit-gradient(linear,
left top,left bottom,color-stop(0.#f0a3a3),color-stop(1, #f42323));
background-image: -webkit-linear-gradient(right, #f0a3a3, #f42323);
background-image: -moz-linear-gradient(right, #f0a3a3, #f42323);
background-image: -ms-linear-gradient(right, #f0a3a3, #f42323);
background-image: -o-linear-gradient(right, #f0a3a3, #f42323);
}
.meter > span:after {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image:
-webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)),
color-stop(.25, transparent), color-stop(.5, transparent),
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)),
color-stop(.75, transparent), to(transparent)
);
background-image:
-webkit-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
background-image:
-moz-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
background-image:
-ms-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
background-image:
-o-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px;
-webkit-animation: move 2s linear infinite;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
And finally here is my run file
<!DOCTYPE html>
<html>
<style type="text/css">
</style>
<script>
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari php<!-- include('test.php');--> ?>
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","Progress.html",true);
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.setRequestHeader( "If-Modified-Since", "Sat, 01 Jan 2000 00:00:00 GMT" );
xmlhttp.send(null);
//showCustomer('ALFKI');
setTimeout(function(){showCustomer('load')}, 1500);
}
</script>
</head>
<body onLoad="showCustomer('Load')">
<div id="txtHint"></div>
</body>
</html>
I am trying to change scrollbar style. it is working in chrome and opera but not working in firefox.
my code for webkit look like this :
body::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
body::-webkit-scrollbar
{
width: 7px;
background-color: #F5F5F5;
}
body::-webkit-scrollbar-thumb
{
background-color: #2CC185;
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
and for mozilla like this :
body::-moz-scrollbar-track
{
-moz-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
body::-moz-scrollbar
{
width: 7px;
background-color: #F5F5F5;
}
body::-moz-scrollbar-thumb
{
background-color: #2CC185;
background-image: -moz-linear-gradient(45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
it is not working for firefox any Idea please.