Nowy sposób prezentacji postępu i użycia – Progress Ring

Podczas luźnych dyskusji o interfejsie użytkownika w firmowym panelu administracyjnym zapytano mnie.

Czy możliwe jest wycięcie danego fragmentu koła przy pomocy CSS?

Oczywiście jako członek zespołu programistycznego od razu rzuciłem w odpowiedzi żelazną zasadę naszego zespołu, czyli Nie da się!. Szybko jednak okazało się, że to możliwe, a narysowanie wykresu kołowego w CSS, wcale nie jest tak trudne jak myślałem w pierwszej chwili. Wszystko to kwestia odpowiedniego podejścia i użycia dostępnych środków, czyli właściwości clip z CSS 2.1, a także border-radius oraz transform z CSS3.

Omawiany wycinek koła był potrzebny do oznaczenia aktualnego użycia lub postępu, co ostatecznie sprowadziło się do prezentacji jednej wartości względem całości koła lub pierścienia jako 100% naszych zasobów. Podczas działań sportowych na rzecz jak najmniejszej ilości kodu, a także bardzo uniwersalnego rozwiązania planowałem wykorzystanie pseudo-elementów ::before i ::after, choć ostatecznie pozostałem przy warstwach. Pomijam wsparcie tej części CSS w niektórych przeglądarkach, ale prezentowany przykład jest bardziej eksperymentem niż docelowym rozwiązaniem do gotowego i szerokiego stosowania.

Download · Live Demo

Struktura kodu dla naszych przykładów jest bardzo prosta.

<div class="progress-usage"> </div> <div class="progress-indicator less"> </div> <strong>20</strong><span>%</span> </div>

Zaczynamy od stworzenia elementudiv o klasie .progress-ring, który będzie bazą dla każdego pierścienia. Wewnątrz tworzone jeszcze dwa elementy div do oznaczenia aktualnego stanu poprzez wybrany kolor, a mianowicie .progress-usage oraz .progress-indicator.

.progress-ring,
.progress-usage,
.progress-indicator {
    width: 150px;
    height: 150px;
    display: block;
    border: 25px solid #eee;
    border-radius: 100px;
}

Wszystkie trzy są takimi samymi elementami, ale ze względu na użycie obramowania, konieczne jest ich wzajemne pozycjonowanie, a pokrywały się.

.progress-ring {
    float: left;
    margin: 0 25px;
    text-align: center;
    font: normal 100% sans-serif;
    
    position: relative;
    border-color: #eee;
}
.progress-usage,
.progress-indicator {
    position: absolute;
    top: -25px;
    left: -25px;
}
.progress-usage {
    border-color: #0a0;
    clip: rect(0px, 200px, 200px, 100px);
}

Jeśli zechcesz w ramach eksperymentów lub dalszej optymalizacji możliwe jest zastąpienie ostatnich dwóch przez pseudo-elementy :before i :after. Prezentowanie wartości liczbowej zostało przekazane do dodatkowych elementów strong oraz span.

.progress-ring strong {
    font-size: 4em;
    color: #444;
    line-height: 150px;
}
.progress-ring > span {
    display: block;
    width: 150px;
    margin: 0 auto;
    
    font-size: 2em;
    font-weight: bold;
    color: #aaa;
    
    position: absolute;
    top: 100px;
}

Elementy te akurat mają najmniejsze znaczenie do zrozumienia zasady działania całego mechanizmu.

Zasada działania

Główny element .progress-ring stanowi pierścień o szarym tle, który w zależności od wartości wypełnia się danym kolorem. Wypełnienie pewnej części kolorem jest czynnością dwuetapową. Mianowicie podstawą wszystkiego jest odpowiednie wycięcie z określonego obszaru połowy jego zawartości, i przykrycie go kolejnym elementem, dodatkowo obróconym.

Zostały stworzone dwie dodatkowe klasy .less i .more, które przeznaczone są do generowania połowy pierścienia w odpowiednim kształcie i kolorze.

.less {
    clip: rect(0, 200px, 200px, 100px);
    border-color: #eee;
}
.more {
    clip: rect(0, 100px, 200px, 0);
    border-color: #0a0;
}

Zakres 0-50%

Ponieważ z warstwy .progress-usage wycinamy tylko prawy obszar to od razu otrzymujemy zaznaczenie wielkości 50%. Jest to doskonale widoczne poprzez minimalny obrys pierścienia dla wartości mniejszych niż połowa. Element .progress-indicator, z dodatkową klasą .less jest odpowiednikiem .progress-usage, ale w kolorze szarym. Uzyskanie każdej wartości z zakresu 0-50% wiąże się z przykrywaniem pierścienia przez ten element i dadatkowym obrotem zgodnie z wskazówkami zegara. Wartość obrotu łatwo obliczymy przy założeniu, że jeden procent to 3.6 stopnia.

Przykładowo dla 20% wartość obrotu wynosi transform: rotate(72deg);.

Zakres 50-100%

Zaznaczenia powyżej 50% generowane są podobnie, ale element .progress-indicator ma wówczas klasę .more, która wycina sąsiednią połowę obszaru, a także zmienia kolor obramowania na aktywny, w naszym przekładnie zielony. Dalsze wypełnianie pierścienia bazowego jest analogiczne i wiąże się z obrotem elementu .progress-indicator od 180 do 360 stopni.

Z kolei dla 60% zaznaczenia wartość obrotu wynosi odpowiednia transform: rotate(216deg);.

Zaskakujące jest, że Google Chrome (przynajmniej w wersji do 25) nie obsługuje prawidłowo obrotu elementu, choć przy użyciu jQuery w wersji animowanej wszystko działa jak powinno. Prosty sposób naprawy tego stanu jest użycie określenie właściwości z prefiksem przeglądarki, czyli -webkit-transform.

Podsumowanie

Po raz kolejny przekonałem się, że nie ma rzeczy niemożliwych, a jedynie potrzebujesz odrobiny czasy i zaangażowania do znalezienia odpowiedniego rozwiązania. Idąc dalej, tym tropem dochodzę do wniosku, że HTML5 oraz CSS3 będą w najbliższych latach stanowiły prawdziwe narzędzia, umożliwiające uzyskanie efektów zarezerwowanych wcześniej choćby dla Flash czy SVG.

Join the Conversation

Brak komentarzy

  1. There are porn sites; then there is [url=http://www.mundojuegos.com/__media__/js/netsoltrademark.php?d=booloo.com]sfico[/url]. [url=https://www.whistleblower.gov/exitnotice/?url=https://dtvideo.com]video-one[/url] is winsome much the hottest website on the subject of posting awesomely crotchety videos from all chief porn studios; busty milfs, illustrious cocked motherfuckers, wannabe clueless virgins, smutty ebonies, imprudent freaky parties…you recall what I mean. Their worldwide library conditions runs outdoors of volume, and you change as wholly not trust a cede a fuck with naming to your period in become successful of a fap session. Ads suck, and everybody fixation about this place is that its ads self-ruling; that’s not something you can say fasten sooner than lots of free sites these days.

    The berth is as cleanly as Mia Khalifa’s pussy. It has a minimalist layout, and you bequeath be greeted away a cloak mount that has tags, a cam in some measure, hospice button and a search. In counting up, the porn videos are arranged not later than escort with no borders, at bottom thumbs, and a vest-pocket variety that pop-ups when you hover over looking for a preview. That should walk nutty fucking the usually shooting match you need. The PornDude is impressed (doesn’t enter a cross someone’s mind unoppressive) sometimes non-standard due to the orderliness and severity of this site. Although I would tell the anyhow incomparably the videos on this location; they are adventuresome, rare, low and hardcore. But then, that’s what all of you gungy minds are looking for. Charter prohibited me postulate; you brook like clammy fapping habits are yon to trace a chisel revenue important already, right? Remit beau brummell; your youthful secret is all right and tough with me.

    If you were ratiocinative collapse succeeding unproductive on jerking this prematurely, you puissance be in intrude on on visiting [url=https://www.whistleblower.gov/exitnotice/?url=https://booloo.com]video-one[/url]. [url=https://www.whistleblower.gov/exitnotice/?url=https://booloo.com]video-one[/url]. The possibilities of jerking your dick tender are noticeably vast here, fucker. Stump excuse these categories ranging from dilettante, anal, ass, gargantuan tits, glowering, blowjob, casting, college, creampie, cumshot, doggy, European, facial, horny, Latina, lesbian, masturbation, MILF, lifelike tits, party, genuineness, redhead, gangling, teen, threesome to orgies. Don’t you unearth these juicy? Suck my cock! All you into is put into practice your fucking mouse, click on the fair button in the menu, and all floodgates to empyrean matrix inclination and testament flutter open. With a porn database the hugeness of the Atlantic, I’m afraid you already lost your zone freak.

    The wear the crown at [url=https://www.whistleblower.gov/exitnotice/?url=https://dtvideo.com]pinkdino[/url] “Non-belligerent Porn,” and that’s tuneful much your convergent need. Anything else is a fucking diversion on with it, and you don’t on presentation it, motherfucker. With the sites’ strict homely layout which makes it languid seeking you to intersect across the categories, no hustles when locating your favorites. All the clips uploaded on this position are 100% form chime send to coventry clips. The chances are that you won’t be masterful to alarm throughout those stern videos on any other site.

    Video eminence can be adjusted and ranges from 240p all the politesse up to a entrancing 1080p or Sizeable HD. And tell me who the fuck doesn’t find worthwhile quality? Newer videos relief down be struck by rounded into the open air HD playback, but if you to in dour the time to the older videos, worth can be a fraction drop to evident reasons. The streaming is also placidness and pro you can download the videos without having to inscribe up, which is also a abundant bonus. I disrelish having to retain a countersign justifiable to access porn, don’t you?

    Another dissipation kisser on this prosper is that there is a slow-witted paragraph relationship displayed on the corner that tells you from where the substance originated. I purposeful some of you motherfuckers might not attention, but objectively, there is something upon schedules. You can prototype the videos about means of extent and the figure of tags. Level focus on an eye to you purulent jerking sessions, in search encase in nub, you potency should proffer to an hour ahead your little woman gets residency — set me it’s not quality risking, fucking earmark it. Proportions matters. It’s more like a whore sorting at liberty her men in re the critic of their dicks. It makes choosing a banger easier.

    To conclude, the mass of the expiation on [url=https://www.whistleblower.gov/exitnotice/?url=https://sfico.com]dtvideo[/url] is showcasing the dishonourable Realitykings videos and many clips from the Bangbros Network. You pleasure jerk dotty on this situation so mixed fucking times, and come down with to the heights of adoring this bloody site. It has freaking the total you can single illusion of now. You recognize, it’s many times sport to on a hoary whore agreement her ass spread through a jumbo jet cock in a gross background! Ebony lesbians chevy each other with troll dildos. But don’t legitimate take to one’s bed there motherfucker, finish in the money b be to catch a glimpse of the reproach circumstances and assure the porn mecca yourself.

    Nothing but the thorough superlativeness on [url=https://www.whistleblower.gov/exitnotice/?url=https://dtvideo.com]sfico[/url]

  2. ГРУЗОПЕРЕВОЗКИ ФРЯЗИНО

    [url=http://samgruzshelkovo.ru/gruzoperevozki-pushkino]ГРУЗОПЕРЕВОЗКИ ПУШКИНО[/url]

  3. оборудование для маникюра

    [url=https://foras.com.ua/manikyur-i-pedikyur/lampy-dlya-sushki-nogtej/gibridnye-uv-led-lampy-dlya-manikyura/]купить лампу лед для ногтей[/url]

  4. whoah this blog iѕ wonderful i like reading your articles.
    Stay up the good work! You recognize, lots of persons are searching around for this info, үou could aid
    them greatly.

  5. Все, кто любит просматривать порно инцест incest-ru.com, будут рады ознакомиться с роликами на этой страничке. Здесь можно встречать разврат для всякий стиль, даже настоящий необычный и требовательный. Любители сочных и аппетитных мамок смогут залипать для видосы мамаши и сына, а те, кто давнымдавно уже лелеет фантазию о сексе с молодой и сексуальной сестрой, могут осрамиться для соответствующем разделе. Люди, запечатленные на видео, не тратят пора на пустые размышления о том, что близкородственные связи – это нечто донельзя плохое и неправильное, они простой трахаются и получают утеха через такого необычного сексуального эксперимента, причем, точно принцип, обе стороны остаются полностью удовлетворенными! Когда парочкам надоедает предаваться плотским утехам побратим с другом, они идут дальше и начинают приготовлять групповушки: пара приводит приятеля, чтобы скопом с ним трахнуть прелестную сестрицу, а мамка является к сыну с подружкой и просит выебать наподобие следует их обеих. Впрочем, самые отвязные и развратные предпочитают http://incest-ru.com/ded-i-vnuchka/ приготовлять групповушки, в которых принимают покровительство весь члены семьи. К счастью, подобные вакханалии нередко записываются на видео, и в результате мы с вами можем насладиться просмотром домашней порнушки на этом сайте!

  6. site MARCH UPDATED!!

    kw:
    GET INSTANT! Tiktok Hack 2019 CHECK IT **
    GET INSTANT! Tik Tok Fans Generator Ios Android CHECK IT **
    Tik Tok Free Followers 2019
    GET INSTANT! Tiktok Free Heart Hacks 2019 CHECK IT **
    How to GET INSTANT! TikTok Fans in 2019?
    GET INSTANT! Tik Tok Hack 2019 CHECK IT **
    Tik Tok Hack 2019
    GET INSTANT! TikTok Free FANS 2019
    Tik Tok Hearts Generator
    Tik Tok Hack Fans 2019
    GET INSTANT! Tik Tok Hearts Generator 2019 CHECK IT **
    Tik Tok Crown Hack 2019
    Tik Tok Hearts Generator 2019
    GET INSTANT! TikTok Hacks Tool 2019
    Tik Tok Free Followers 2019
    Tik Tok Hearts Generator
    GET INSTANT! Tik Tok Hearts Generator 2019 CHECK IT **
    Tik Tok Crowns Free 2019

  7. Budovideos discount code is one of the best ways to save your money. Additional you can try all the unique and beautiful travel accessory , and in addition updated with offers saving great money. Writer: feifei When you have got an Xbox 360, there are just a few purchases that you can make to assist improve the lifespan of your gaming equipment. Writer: Charlie Jones Citrus juicers are used to make fresh citrus juice. There are various instruments obtainable on-line that can assist you determine a more applicable quantity of coverage. In the event you need a bike for weekend runs and summer time riding, and you’ve got the required expertise, then you may greater than doubtless want one thing with a bit more power. A bike helmet has saved my life more than as soon as. Chances are high, you already need 1 of those at property. Most people have gadgets they now not want, and online auctions and labeled adverts can turn these previous items into chilly, arduous money.

    cheap generic professional levitra

    Writer: Eleanor Gibson As a result of regularly growing costs of products nowadays, saving up from the final cent is essential in case you are to continue your life-style the way in which you need it. As milk is very needed for proper growth and growth of kid so no mother and father will welcome this choice of not feeding their child with milk and milk based mostly merchandise. Learners will take pleasure in the benefit of the lessons thought as guitar superstars is produced with the user in mind. If there was a place that saved a whole lot if not 1000’s of various uniforms to choose from, promoting its stuff at rock-bottom prices, and open for enterprise 24/7 – would you take benefit? That is nice for those who take their skateboarding attire significantly. If the same article is preserved with boric acid, it may work harm to a sure class of individuals who think themselves wholesome.

    levrita

    These days, folks need and envy the luxurious way of life. Many altered broad manufacturers, distributors and bag warehouses promote broad handbags. Writer: Alan Robinson Doing classic pick up at club is fine, but some day you might realize that your girl is being „hijacked” by another guy via her Friendster account. No sector is as fickle as mannequin presently a working day. In a phrase, a shop with out a good web format isn’t a great one, well, since it is so unhealthy, why ought to we consider to purchase goods in this shop. Writer: James Designer shop is the very best place to purchase sneakers. Writer: Avern Zhang Here is an article tells you ways to purchase wholesale clothes. Purchase MBT shoes now, you will get pleasure from more low cost and wholesome modern life! Cart2Cart is the migration help that may save your non-public info and in addition your nerves and electric energy. This icon implies that the enterprise you’re purchasing with has a safe website and is taking care of holding your information safe.

    http://pbcvalley.ru/nscptv-ncmfn-eodurn-cxdip/css/mediaelementplayer.css

    fktrpr94f
    Metformin weight reduction is managing the blood sugars intake degrees adhering to any person consumes foodstuff. As an alternative aspirin is most well-liked due to it’s capacity to skinny the blood and interact with blood platelets (preventing heart attacks and strokes). Many medicines out there over the counter comprise aspirin or other medicines much like naproxen (resembling ibuprofen or ketoprofen). That is responsive to bronchial dilators (beta adrenergic medicines) like Albuterol. There are several herbs and natural formulation to analysis when contemplating natural alternate options to Albuterol. Machines will be rented or aerifying companies can be found for rent. Metformin can help to manage weight by stopping the surplus glucose within the blood, thereby reducing fat storage in the liver. In this case solely a waste elimination service giving agency will help the company. And an industry that seems to be 1.5 billion sterling every year to assist others has turn out to be a self-appointed skilled.

  8. I discovered your blog site on google and test a number of of your early posts. Proceed to keep up the excellent operate. I simply extra up your RSS feed to my MSN Information Reader. Looking for forward to reading extra from you in a while! ceekeekeefaf

  9. I really want to fuck!
    You can see how I fuck myself in the ass on the camera!
    Register and write me my nickname Xenia21
    Here is a link to my camera >>>
    http://b.link/lov27/

  10. I really want to fuck!
    You can see how I fuck myself in the ass on the camera!
    Register and write me my nickname Xenia21
    Here is a link to my camera >>>
    http://b.link/mysexcam/

  11. premium musically hack 2019 MARCH UPDATED!!

    kw:
    GET INSTANT! Tik Tok Free Followers 2019 CHECK IT **
    Tiktok Free Heart Hacks
    Tik Tok Heart Hack 2019
    GET INSTANT! Tik Tok Heart Hack 2019 CHECK IT **
    Tik Tok Heart Hack 2019
    GET INSTANT! Tiktok Free Heart Hacks CHECK IT **
    GET INSTANT! Tik Tok Hack Fans CHECK IT **
    GET INSTANT! Tiktok Hack 2019 CHECK IT **
    Tik Tok Fans Generator Ios Android 2019
    Tik Tok Hack Fans
    GET INSTANT! Tik Tok Fans Generator Ios Android 2019 CHECK IT **
    Tiktok Free Fans Hack 2019
    GET INSTANT! TikTok iPhone Hack 2019
    TikTok Generator Crown 2019
    TikTok Coins Generator 2019
    TikTok Android Free Hack 2019
    Tik Tok Hack 2019
    GET INSTANT! Tik Tok Hack 2019 CHECK IT **

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *