Hi,hallo
Ich habe mir einen Ladebalken erstellt
in einem <style> </style> ist das aussehen gespeichert,
nun habe ich alles in eine .css gepackt
aber wie setzte ich jetzt die style class !?
PercentBar.css
HTML
body {
progress {
width: 200px;
height: 14px;
margin: 2px;
display: block;
/* Important Thing */
-webkit-appearance: none;
border: none;
}
progress::-webkit-progress-bar {
background: black;
border-radius: 50px;
padding: 2px;
box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.2);
}
progress::-webkit-progress-value {
border-radius: 50px;
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
background:
-webkit-linear-gradient(45deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),
-webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
-webkit-linear-gradient(right, #ba7448, #c4672d);
/* Looks great, now animating it */
background-size: 25px 14px, 100% 100%, 100% 100%;
-webkit-animation: move 7s linear 0 infinite;
}
@-webkit-keyframes move {
0% {background-position: 0px 0px, 0 0, 0 0}
100% {background-position: -100px 0px, 0 0, 0 0}
}
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #FF261F;
height: 36px;
line-height: 36px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #FF261F;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
}
Alles anzeigen
und so mach ich die bar:
HTML
<progress class=<link href="LINK ZU PercentBar.css" /> max="100" value="<?php echo $perc ?>"></progress>
scheint aber mit Link nicht zu funktionieren
mfg weis jmd wie ich das machen kann