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;
        }
}

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

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

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