Sourceਤਰੱਕੀ
ਸਟੈਕਡ ਬਾਰਾਂ, ਐਨੀਮੇਟਡ ਬੈਕਗ੍ਰਾਊਂਡਾਂ, ਅਤੇ ਟੈਕਸਟ ਲੇਬਲਾਂ ਲਈ ਸਮਰਥਨ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਲੇ ਬੂਟਸਟਰੈਪ ਕਸਟਮ ਪ੍ਰਗਤੀ ਬਾਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਉਦਾਹਰਨਾਂ।
ਤਰੱਕੀ ਦੇ ਹਿੱਸੇ ਦੋ HTML ਤੱਤਾਂ, ਚੌੜਾਈ ਨੂੰ ਸੈੱਟ ਕਰਨ ਲਈ ਕੁਝ CSS, ਅਤੇ ਕੁਝ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਾਲ ਬਣਾਏ ਗਏ ਹਨ। ਅਸੀਂ HTML5 <progress>
ਐਲੀਮੈਂਟ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕਰਦੇ , ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦੇ ਹੋਏ ਕਿ ਤੁਸੀਂ ਪ੍ਰਗਤੀ ਬਾਰ ਸਟੈਕ ਕਰ ਸਕਦੇ ਹੋ, ਉਹਨਾਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰ ਸਕਦੇ ਹੋ, ਅਤੇ ਉਹਨਾਂ ਉੱਤੇ ਟੈਕਸਟ ਲੇਬਲ ਲਗਾ ਸਕਦੇ ਹੋ।
- ਅਸੀਂ
.progress
ਪ੍ਰਗਤੀ ਪੱਟੀ ਦੇ ਅਧਿਕਤਮ ਮੁੱਲ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਇੱਕ ਰੈਪਰ ਵਜੋਂ ਵਰਤਦੇ ਹਾਂ।
.progress-bar
ਅਸੀਂ ਹੁਣ ਤੱਕ ਦੀ ਤਰੱਕੀ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਅੰਦਰੂਨੀ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ .
.progress-bar
ਉਹਨਾਂ ਦੀ ਚੌੜਾਈ ਸੈਟ ਕਰਨ ਲਈ ਇੱਕ ਇਨਲਾਈਨ ਸ਼ੈਲੀ, ਉਪਯੋਗਤਾ ਕਲਾਸ, ਜਾਂ ਕਸਟਮ CSS ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
- ਇਸ ਨੂੰ ਪਹੁੰਚਯੋਗ ਬਣਾਉਣ
.progress-bar
ਲਈ ਕੁਝ role
ਅਤੇ aria
ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
ਇਹ ਸਭ ਇਕੱਠੇ ਰੱਖੋ, ਅਤੇ ਤੁਹਾਡੇ ਕੋਲ ਹੇਠ ਲਿਖੀਆਂ ਉਦਾਹਰਣਾਂ ਹਨ.
ਬੂਟਸਟਰੈਪ ਚੌੜਾਈ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਮੁੱਠੀ ਭਰ ਉਪਯੋਗਤਾਵਾਂ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ । ਤੁਹਾਡੀਆਂ ਲੋੜਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹੋਏ, ਇਹ ਪ੍ਰਗਤੀ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਕੌਂਫਿਗਰ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦੇ ਹਨ।
ਦੇ ਅੰਦਰ ਟੈਕਸਟ ਰੱਖ ਕੇ ਆਪਣੀਆਂ ਪ੍ਰਗਤੀ ਪੱਟੀਆਂ ਵਿੱਚ ਲੇਬਲ ਸ਼ਾਮਲ ਕਰੋ .progress-bar
।
ਅਸੀਂ ਸਿਰਫ height
'ਤੇ ਇੱਕ ਮੁੱਲ ਸੈਟ ਕਰਦੇ ਹਾਂ .progress
, ਇਸ ਲਈ ਜੇਕਰ ਤੁਸੀਂ ਉਸ ਮੁੱਲ ਨੂੰ ਬਦਲਦੇ ਹੋ ਤਾਂ ਅੰਦਰਲਾ .progress-bar
ਆਪਣੇ ਆਪ ਹੀ ਉਸ ਅਨੁਸਾਰ ਮੁੜ ਆਕਾਰ ਦੇਵੇਗਾ।
ਵਿਅਕਤੀਗਤ ਤਰੱਕੀ ਬਾਰਾਂ ਦੀ ਦਿੱਖ ਨੂੰ ਬਦਲਣ ਲਈ ਬੈਕਗ੍ਰਾਉਂਡ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਜੇਕਰ ਤੁਹਾਨੂੰ ਲੋੜ ਹੋਵੇ ਤਾਂ ਇੱਕ ਪ੍ਰਗਤੀ ਭਾਗ ਵਿੱਚ ਕਈ ਪ੍ਰਗਤੀ ਬਾਰਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ।
ਪ੍ਰਗਤੀ ਪੱਟੀ ਦੇ ਬੈਕਗ੍ਰਾਉਂਡ ਰੰਗ ਉੱਤੇ CSS ਗਰੇਡੀਐਂਟ ਦੁਆਰਾ ਇੱਕ ਸਟ੍ਰਿਪ ਲਾਗੂ ਕਰਨ .progress-bar-striped
ਲਈ ਕਿਸੇ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ।.progress-bar
ਸਟ੍ਰਿਪਡ ਗਰੇਡੀਐਂਟ ਨੂੰ ਵੀ ਐਨੀਮੇਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। CSS3 ਐਨੀਮੇਸ਼ਨਾਂ ਰਾਹੀਂ ਸੱਜੇ ਤੋਂ ਖੱਬੇ ਪੱਟੀਆਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨ ਲਈ ਵਿੱਚ .progress-bar-animated
ਸ਼ਾਮਲ ਕਰੋ ।.progress-bar