CSS3-те loader жасаймыз (Javascript-сіз)

loader — файл не құжат не веб парақ жүктелгенде (көбіне ajax-арқылы) қазір күтіңіз жүктеліп жатыр деген мағына беретін әлгі айналып тұратын анимациялық формалар.
Мысалы мынау сияқты




Бұрындары бұл бейнелер анимациялық .gif суреттер ретінде жасалынатын, кейін javascript, jQery ақрылы жасалынып жүрді, енді бертіңкеле CSS3-тің жаңа мүмкіндіктеріп пайдаланып жасайтын болыпты, енд мен де қалыс қалмайын деп бір-екі лоадерді жасап көрейін дедім. Көп теория жазбаймын, алдыңғы жазбаларымда түсіндірген болатынмын. Түсінбегендерің соларды бір оқып шығыңдар.

Практика:

Бірінші мысал: Алдымен қарапайым түрін жасаймыз.

html-да керегі небәрі екі тег.
<div class="block"><div class="birinshi"></div></div>


css-те мыналарды жазамыз
.block {
	width: 300px;
	height: 20px;
	position: relative;
	margin: 0px auto;
	overflow: hidden;
}

.birinshi {
	width: 300px;
	height: 20px;
	background-color: #11C9BA;
	position: absolute;
	top: 0px;
	left: -300px;
	animation-name: 'load_2';      /* анимация аты */
    animation-duration: 2000ms;      /* анимация жылдамдығы */
	animation-timing-function: linear;  /* анимация оындалуы бірқалыпты */
    animation-iteration-count: infinite;    /* қайталану реті (шексіз)*/
	
		/* webkit ядросы үшін */
		-webkit-animation-name: 'load_2'; 
		-webkit-animation-duration: 2000ms;
		-webkit-animation-timing-function: linear; 
		-webkit-animation-iteration-count: infinite;
		
		/* webkit ядросы үшін */
		-moz-animation-name: 'load_2';
		-moz-animation-duration: 2000ms;
		-moz-animation-timing-function: linear; 
		-moz-animation-iteration-count: infinite;
}



/*енді кейфрейм*/ 
@keyframes 'load_2' {
        from { 
            left: -300px; /* анимацияны басы (Бірінші кадр)*/
        }
        to {
            left: 600px; /* анимацияны соңында (соңғы кадр)*/
        }
}

/* webkit ядросы үшін */
@-webkit-keyframes 'load_2' {
        from { 
            left: -300px;
        }
        to {
            left: 600px;
        }
}

/* moz ядросы үшін */
@-moz-keyframes 'load_2' {
        from { 
            left: -300px;
        }
        to {
            left: 600px;
        }
}


Нәтижесінде мынадай «жүктелуші» шықты


Демо мына жерде



Екінші мысал: Типі осындай, бірақ сәәәл күрделірек.

html-ге мынаны.
<div class="line"><div class="load"></div></div>


css-ке мынаны жазамыз
.line {
	width: 170px;
	height: 4px;
	border-radius: 2px;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
	background-color: #89CFF7;
	position: relative;
	top: 40px;
	left: 40px;
}
.load {
	width: 12px;
	height: 12px;
	border-radius: 6px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
	background-color: #0A4769;
	position: absolute;
	top: -4px;
	left: 0px;
	animation-name: 'load_1';      /* анимация аты */
    animation-duration: 700ms;      /* анимация жылдамдығы */
    animation-iteration-count: infinite;    /* қайталану реті (шексіз)*/
    animation-direction: alternate;         /* анимация басынан аяғына дейін, және кері қарата қайталанады */
		
		/* webkit ядросы үшін */
		-webkit-animation-name: 'load_1'; 
		-webkit-animation-duration: 700ms;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-direction: alternate;
		
		/* moz ядросы үшін */
		-moz-animation-name: 'load_1';
		-moz-animation-duration: 700ms;
		-moz-animation-iteration-count: infinite;
		-moz-animation-direction: alternate;
}

/*енді кейфрейм*/
@keyframes 'load_1' {
        from { 
                left: 0px; /* анимацияның басы*/
        }
        to {
                left: 158px; /* анимацияның соңын*/
        }
}

/* webkit ядросы үшін */
@-webkit-keyframes 'load_1' {
        from { 
                left: 0px;
        }
        to {
                left: 158px; 
        }
}

/* moz ядросы үшін */
@-moz-keyframes 'load_1' {
        from { 
                left: 0px;
        }
        to {
                left: 158px;
        }
}


Нәтижесінде мынадай «жүктелуші» шықты


Демо мына жерде



іііі осымен болған сияқты. Келесіде одан да күрделі түрін жазып көреміз. Сау болыңыздар.

12 пікір

Abylai
qyrmyzy
: аю: Қазір, жасап көремін:)
korwinin_kyzy
өз өзіне бетінді жауп отсынба?
Abylai
korwinin_kyzy
)))
Ak123
үйбәй, Көршінің қызына плюстерді аямай қойыватқан Жұрттың баласы сіз емес пе?))))
MSHERIMBEK
Қайырбек, движение жасап жүрген сияқты ғой:)
khairbek
хех деп есыней курсындым
MSHERIMBEK
сындырып алсиш:) кетәрі емес қыз сияқты ғой)
khairbek
асылында алщищ кей деректерге суйнетын болсақ алшиш болады, ал алсиш алсай деген бізден емес)))))
khairbek
емае осыны уйренып алу керек ед
followme_alik
Қызық тақырып. Жиірек жазылса_ :)
Тек тіркелген қолданушылар ғана пікір қалдыра алады.