کدهای جذاب و دیدنی ( Square in circle ) : ساخت لودینگ زیبا با CSS Animation

در این قسمت میخوام یک کد ( Square in circle ) جالب رو در اختیارتون بزارم.

توضیحات مربوط Square in circle

همونطور که دیدید یک حالت و حرکت زیبا انجام میشه و با استفاده از میله های متحرک، یک مربع چرخان در دایره به وجود میاد. میتونین از این لودینگ ایده بگیرید و از اون استفاده کنید.

این کار با استفاده از CSS خالص انجام شده است. در قسمت HTML تعداد 36 المنت قرار گرفته که هر کدام نقش یکی از چوبهای متحرک رو ایفا میکنن. استایل متناسب برای هر چوب قرار داده شده و اون رو در موقعیت مناسب قرار داده و بعد از اون برای هر کدام انیمیشنی رو تعریف کرده و اونا رو هماهنگ با یکدیگر حرکت میده.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source