Ինչպե՞ս ավելացնել Loading Spinner JavaScript-ում:

Բարև Կոդեր, Բարի գալուստ Codewithrandom բլոգ: Այսօրվա բլոգում մենք կտեսնենք, թե ինչպես ստեղծել և ավելացնել Բեռնման մանողօգտագործելով JavaScript:սա Infinity Loading Spinner-ն է, որպեսզի կարողանաք կարգավորել ինքներդ ձեզ և ավելացնել JavaScript-ի միջոցով:

Ինչպե՞ս ավելացնել Loading Spinner JavaScript-ում:

Ավելացնել բեռնման մանող JavaScript-ում[/caption]

Այժմ The Project-ը պատրաստվում է ստեղծել, և դրա համար մենք նախ ավելացնում ենք HTML կոդ՝ spinner-ի բեռնման համար:

HTML կոդը:

<div id="spinner"></div>

Այստեղ HTML կոդի մեկ տողը բավական է պտտվող բեռնիչ ավելացնելու համար: Պարզապես div դաս, որի վրա գրված է անունը:

Այժմ մենք ավելացնում ենք ֆոն՝ օգտագործելով CSS:

CSS ԿՈԴ:

html,body {
  margin:0;
  background:rgba(0,0,0,0.9)
}

Զանգահարելով HTML-ը և BODY-ը՝ մենք սահմանում ենք լուսանցքի արժեքը զրոյի, իսկ ֆոնը՝ օգտագործելով RGBA Property-ը: Այժմ բեռնման անիմացիան ուսումնասիրելու համար բեռնման պտույտ ավելացնելու համար մենք օգտագործում ենք Java Script:

Spinner Javascript կոդը բեռնվում է.

բայց 1-ին ավելացրեք այս cdn հղումը ձեր նախագծին, ինչպես javascript-ի script tag-ում

https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js

Այժմ ավելացրեք այս js կոդը ձեր js ֆայլին

let opts = {
 lines: 13,
 length: 28,
 width: 14,
 radius: 42,
 scale: 1,
 corners: 1,
 color: '#FFF',
 opacity: 0.25,
 rotate: 0,
 direction: 1,
 speed: 1,
 trail: 60,
 fps: 20,
 zIndex: 2e9,
 className: 'spinner',
 top: '50%',
 left: '50%',
 shadow: false,
 hwaccel: false,
 position: 'absolute',
},
 target = document.getElementById('spinner'),
 spinner = new Spinner(opts).spin(target);

Այս JavaScript կոդում նախ մենք ստեղծում ենք փոփոխական թիրախով և ստանում ID-ն՝ օգտագործելով get element առ id հատկություն: Այնուհետև մենք նորից ստեղծում ենք փոփոխական պտտող և ավելացնում ենք նոր պտտվող օբյեկտ և փոխանցում OPTS փոփոխական, որը պարունակում է արժեքներ բեռնման պտույտ կատարելու համար, և պտույտը (թիրախը) կանչվում է:

Արժեքները, ինչպիսիք են երկարությունը, լայնությունը, բարձրությունը, գույնը, պտույտը և այլն… ավելացվում են բեռի պտույտն ավարտելու համար:

Այժմ մենք հաջողությամբ ավարտեցինք մեր նախագիծը՝ ավելացնելով կոդերը: Այսպիսով, մենք կարող ենք տեղափոխվել նախագծի նախադիտում տվյալ Արդյունք բաժնում:

Այժմ մենք հաջողությամբ ավելացրել ենք մերLoading SpinnerՕգտագործելով JavaScript: Դուք կարող եք օգտագործել այս նախագիծը ձեր անձնակազմի կարիքների համար, և կոդի համապատասխան տողերը տրված են ստորև նշված կոդային գրիչի հղումով:

Եթե ​​գտնում եք, որ այս բլոգն օգտակար է, ապա համոզվեք, որ որոնեք Codewithrandom-ը google-ում՝ Աղբյուրային կոդերով Front End Projects-ի համար և համոզվեք, որ հետևեք «Code with Random Instagram» էջին:

Հղման ԿՈԴ -Hexr

ԳՐԵԼ Է —Ռագունաթան

Ո՞ր կոդի խմբագրիչն եք օգտագործում այս Loading Spinner-ի համար:

Ես անձամբ խորհուրդ եմ տալիս օգտագործել VS Code Studio, դա պարզ է և հեշտ օգտագործման համար:

Արդյո՞ք այս նախագիծը արձագանքում է, թե ոչ:

Այո, Loading Spinner-ը պատասխանատու նախագիծ է

Այս նախագիծը ստեղծելու համար որևէ արտաքին հղում օգտագործու՞մ եք:

Այո, մենք օգտագործում ենք արտաքին հղում դեպի Loading Spinner: