Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Progress bar - koło
Forum PHP.pl > Forum > Przedszkole
borpaw
ściągnąłem z internetu kod css progresu w kole, jednak rysuje się lekko zniekształcony w sęsie takim, że na obwolucie koła są jakieś zniekształcenia.

Podobnie jak jak używam border-radius: 50%; to zniekształca to co jest wewnątrz.

Jest na to jakaś rada?

  1. .progress-radial {
  2. float: left;
  3. margin-right: 22px;
  4. position: relative;
  5. width: 60px;
  6. height: 60px;
  7. border-radius: 50%;
  8. background-color: #e0d9d0;
  9. }
  10.  
  11. /* -------------------------------------
  12.  * Optional centered circle w/text
  13.  * ------------------------------------- */
  14. .progress-radial .overlay {
  15. position: absolute;
  16. width: 36px;
  17. height: 36px;
  18. background-color: #fcfaf9;
  19. border-radius: 50%;
  20. margin:12px;
  21. text-align: center;
  22. line-height: 20px;
  23. font-size: 16px;
  24. }
  25.  
  26. /* -------------------------------------
  27.  * Mixin for progress-% class
  28.  * ------------------------------------- */
  29.  
  30. .progress-0 {
  31. background-image: linear-gradient(90deg, #e0d9d0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(90deg, #1b7a13 50%, #e0d9d0 50%, #e0d9d0);
  32. }
  33.  
  34. .progress-5 {
  35. background-image: linear-gradient(90deg, #e0d9d0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(108deg, #1b7a13 50%, #e0d9d0 50%, #e0d9d0);
  36. }
  37.  
  38. .progress-10 {
  39. background-image: linear-gradient(90deg, #e0d9d0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(126deg, #1b7a13 50%, #e0d9d0 50%, #e0d9d0);
  40. }
Rysh
Rada jest zawsze ta sama. Pokaż kod.
borpaw
już dodałem do postu, zapomniałem wkleić

Ma ktoś może jakiś pomysł?
trueblue
Jeśli tło pod kółkiem jest jednolite (np. białe), to dodaj do .progress-radial: border:2px solid #fff;
borpaw
Dzięki, o to chodziło dokładnie.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.