WejustwanttogiveittheclasswithProgressbarhereandthensincewewantedtosayloadinginsideofit, we'regoingtouse a data, a tributewhichessentiallyallowsustocreateanycustomattributethatwewanthonorHTMLelementhere.

I justwanttomakeitsothatwe'regoingtobeusingtheboxsizingofborderboxforallofourdifferentelements, whichwillmakestylingaredifferentsizeings a loteasiersowecouldjustchangeourboxsizinghere, changeintoborderboxandeveryGailandalso I wanttoselectthebodyandremoveallpaddingandmarginfromitsowecouldjusthavepaddingtozeroandthemargintozero.

Whatwewanttodoiswewanttogiveit a whipand a height, sowe'lljust, forexample, say a widthof 500 pixelson.

We'regoingtogiveit a heightofthree e m andThereasonwe'reusingaminsteadofpixelsisbecausewewanttheheightofourprogressbartoscalewiththesizeofthetextthat's insideofit.

Lastly, wejustwanttochangethetextcodeinsideofourProgressbartobewaitsothatourtextwillshowupontopofthedifferentblackcolorbecauseblacktextonblackbackgroundisimpossibletoseeandthennext, sincewehavenomoreelementsinsideofourHTMLwewanttouseis a pseudoelement.

YouwanttoaddthesuitelementtoaddingtoColeman's andthentypingbefore, andthisisgoingtoessentiallyadd a newelementtoourdocumentthatisgoingtoberightbeforethisprogressbar.

Now, tomakethispseudoelementactuallyshowup, weneedtogiveitwhat's calledcontent, andnormallyyouwouldjustgiveit a pointcontentifyouwanttostyleitinsomeformofwayofjustbeing a backgroundelement.

Wewantedtobethesamethingfromthetop 0.5 e m samethingforthebottomof 0.5 PMButnowifyousaythatyouseethatareloadingisnowbeingpositionedperfectlyinthecenterbecauseit's takingupfullheightminus 0.5 a.

M onthetopandthebottomnext.

Whatwewanttodoiswewanttojustgiveit a withfornow, we'lljustsayit's goingtobe 10% thatwehavesomethingtoworkwith.

Andwealsowanttoset a minwithWe'regonnasetthisyeartobetoourIan.

Soinsteadofprogressarewegotourbeforeelementhereandwe'regonnatakethiswithyouandwe'regoingtouse a calculation, andwhatwe'regoingtodoisaccess a variable, whichisgoingtobe a CSSvariablecalledwith, andwe'regoingtodefaultedtozeroifitdoesn't actuallyexist.

Andthenwe'regoingtotakethiswithbecausethiswithisjustgoingtobe a numberlikeone, 23 10 It's notactually a percent, soweneedtoconvertthatto a percentage, sojustmultiplyitby 1% whichwillessentiallyconvertwhatevernumberwepassitinto a percentageso 10 thenumber 10 willbeconvertedto 10%.

Thenumberonewillbeconvertedto 1% andsoon.

Andifyousaythatyoucanseeitjustdefaultstozero.

Sincewe'renotactuallypassingInuit.

ButifwegointoherHTMLhereandweusethestyleattributeandwewant a stylethewithtobe, forexample, 20 andwe'llsaveit, younotseethatourprogresspartis 20%.

Wecouldchangeinto 50 andit's goingtobe 50% andsoon, andthat's a reallypowerfulThisallowsustoset a defaultwithforourprogressbarassoonasthepageloads, forexample, wecouldjustsaiditto 10% hereforwhen I pagefloats.

ButwhatwouldhappenifwewanttoactuallymodifythisProgressbarinsideofjob a scrip, forexample, tostimulateloading a pagebecausewe'reusingsexasvariables, It's goingtobereallyeasytodothat.

Sotoactuallygetthecurrent, weneedtogetthecomputerstyleofourprogressbarsowecouldjustgetcomputerstyleofourprogressbarhereandthentogetthewidthfromthat, allweneedtodoistakethatweneedtousepartsfloatsincewe'regoingtobegetting a stringandwewanttoconvertitto a number, andwe'rejustgoingtosaycomputedstyle.

Wewanttogetthepropertyvalueforthatwithproperty.

Sowepassingthatwithpropertyandthenifthatdoesn't exist, forexample, assoonasthepageloads, ifwedon't actuallysupplyitwith, thiswillbenot a number.