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;
- }
- }
und so mach ich die bar:
scheint aber mit Link nicht zu funktionieren
mfg weis jmd wie ich das machen kann
