نمایش‌دهنده‌های CSS افکت‌هایی هستند که برای نشان دادن فرآیند بارگیری یک صفحه وب استفاده می‌شوند. این افکت‌ها با استفاده از CSS پیاده‌سازی می‌شوند و می‌توانند بر روی انواع مختلفی از عناصر صفحه وب، مانند یک اسپینر یا یک نوار پیشرفت، اعمال شوند. نمایش‌دهنده‌های CSS معمولاً برای بهبود تجربه کاربری استفاده می‌شوند، با نمایش بصری اطلاع می‌دهند که محتوا در حال بارگیری یا پردازش است.
ویژگی‌های زیر از CSS، چندین ویژگی هستند که می‌توانند برای ایجاد یک نمایش‌دهنده استفاده شوند:
-
border: برای تعیین اندازه و رنگ حاشیه نمایش‌دهنده استفاده می‌شود.
-
border-radius: برای تعیین شکل نمایش‌دهنده استفاده می‌شود. به عنوان مثال:
border-radius: 50%نمایش‌دهنده را به یک دایره تبدیل می‌کند. -
border-top، border-bottom، border-left و یا border-right: برای نشان دادن جهتی که نمایش‌دهنده باید بچرخد استفاده می‌شوند.
-
width: برای تعیین عرض نمایش‌دهنده استفاده می‌شود.
-
height: برای تعیین ارتفاع نمایش‌دهنده استفاده می‌شود.
-
animation: برای تعیین زمان گردش نمایش‌دهنده استفاده می‌شود.
-
@keyframes: دستورالعمل @keyframes برای تعیین قانون انیمیشن استفاده می‌شود. این می‌تواند حاوی کلمات کلیدی مانند from و to باشد، که به ترتیب به معنای 0٪ و 100٪ است؛ جایی که 0٪ آغاز انیمیشن و 100٪ پایان آن است.
-
transform: تابع transform برای تعیین درجه چرخش برای نمایش‌دهنده استفاده می‌شود.
-
mask / mask-composite: برای ایجاد شکل نهایی نمایش‌دهنده استفاده می‌شود.
در کدهای خود برای مرورگرهایی که ویژگی‌های انیمیشن و تبدیل را پشتیبانی نمی‌کنند، باید پیشوند -webkit- را اضافه کنید.
برای تغییر این متن بر روی دکمه ویرایش کلیک کنید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
Creating Loader
برای ایجاد یک لودر با استفاده از CSS، می‌توانید این مراحل را دنبال کنید:
-
ایجاد یک عنصر div برای نمایش لودر.
-
استفاده از استایل‌دهی CSS برای لودر، یک کلاس برای آن تعریف کنید، به عنوان مثال کلاس
.demo-loader. -
تنظیم عرض و ارتفاع لودر.
-
تنظیم حاشیه، شعاع حاشیه یا حاشیه‌های طرفین مجزا برای لودر.
-
تعیین قانون انیمیشن برای لودر، با استفاده از قانون
@keyframes. -
استفاده از پیشوند
-webkitبرای مرورگرهایی که از ویژگی‌های انیمیشن و تبدیل پشتیبانی نمی‌کنند. -
این کلاس را (
.demo-loader) در عنصر div خود درون تگ body فراخوانی کنید.
می‌توانید از ترکیب‌های رنگ، شکل، الگوها و ترفندهای انیمیشن برای لودر خود استفاده کنید. با ویژگی‌های CSS بازی کنید تا لودر خود را ایجاد کنید.
هسته‌ی CSS بسیاری از انواع مختلف لودرها را ایجاد کرده است. در بخش بعدی، به برخی از این مثال‌ها می‌پردازیم.
Basic Example
این کد یک مثال ابتدایی برای ایجاد یک لودر با استفاده از CSS را نشان می‌دهد:
<html>
<head>
<style>
.loader-test {
border: 20px solid #110101;
border-radius: 60%;
border-top: 20px solid #f10c18;
border-right: 20px solid yellow;
border-bottom: 20px solid blue;
border-left: 20px solid green;
width: 50px;
height: 50px;
-webkit-animation: spin 5s linear infinite;
animation: spin 5s linear infinite;
}
@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
</style>
</head>
<body>
<h2>CSS Loader</h2>
<div class="loader-test"></div>
</body>
</html>این کد به شما یک لودر ساده با استفاده از CSS نشان می‌دهد. لودر از یک مربع با حاشیه‌های مختلف تشکیل شده است که به طور متناوب با یک انیمیشن چرخشی دورانی حرکت می‌کند. این لودر از ویژگی‌های CSS مانند border و animation استفاده می‌کند تا ایجاد شود.
With border-right Property
این کد یک مثال نشان می‌دهد که چگونه با استفاده از ویژگی border-right یک لودر ساخته شود:
<html>
<head>
<style>
.loader-test {
border: 20px solid #110101;
border-radius: 60%;
border-right: 20px solid red;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
</style>
</head>
<body>
<h2>CSS Loader</h2>
<div class="loader-test"></div>
</body>
</html>در این کد، یک مربع به عنوان لودر ایجاد شده است. این مربع دارای یک حاشیه به اندازه 20 پیکسل و رنگ سیاه می‌باشد. ویژگی border-right با عرض 20 پیکسل و رنگ قرمز مشخص شده است. این لودر با استفاده از ویژگی‌های CSS و انیمیشن تعیین شده با keyframes دورانی می‌شود.
With :before and :after
این کد نمونه‌ای را نشان می‌دهد که چگونه با استفاده از عناصر مجازی مانند :before و :after می‌توان یک لودر ایجاد کرد:
<html>
<head>
<style>
.loader-test {
width: 100px; /* کنترل اندازه */
aspect-ratio: 1;
-webkit-mask: conic-gradient(red, yellow, green);
mask: conic-gradient(red, yellow, green);
animation: spin 2s steps(12) infinite;
}
.loader-test,
.loader-test:before,
.loader-test:after{
background: conic-gradient(red, yellow, green);
}
.loader-test:before,
.loader-test:after{
content: "";
transform: rotate(30deg);
}
.loader-test:after{
transform: rotate(60deg);
}
@keyframes spin {
from {transform: rotate(0turn)}
to {transform: rotate(1turn)}
}
div {
margin: 20px;
width: 100px;
height: 100px;
place-content: center;
place-items: center;
}
</style>
</head>
<body>
<h2>CSS Loader</h2>
<div class="loader-test">
</div>
</body>
</html>در این کد، یک مربع به عنوان لودر ایجاد شده است که از عناصر مجازی :before و :after برای ایجاد افکت‌های دوران استفاده می‌کند. از ویژگی‌های CSS مانند conic-gradient برای تعیین رنگها استفاده شده است. همچنین انیمیشن spin با استفاده از کلیدهای keyframes مشخص شده است.
With linear-gradient
این کد نمونه‌ای را نشان می‌دهد که چگونه با استفاده از ترکیبی از linear-gradient و conic-gradient می‌توان یک لودر ایجاد کرد:
<html>
<head>
<style>
.loader-test {
width: 50px;
height: 50px;
padding: 10px;
aspect-ratio: 1;
border-radius: 50%;
margin: 20px;
background: linear-gradient(10deg,#ccc,red);
-webkit-mask: conic-gradient(#0000,#000), linear-gradient(#000 0 0) content-box;
mask: conic-gradient(#0000,#000), linear-gradient(#000 0 0) content-box;
-webkit-mask-composite: source-out;
mask-composite: subtract;
animation: load 1s linear infinite;
}
@keyframes load {
to{transform: rotate(1turn)}
}
</style>
</head>
<body>
<h2>CSS Loader</h2>
<div class="loader-test"></div>
</body>
</html>در این کد، یک مربع با شعاع گردندگی 50% به عنوان لودر ایجاد شده است که از ترکیبی از linear-gradient و conic-gradient برای ایجاد الگوی رنگی استفاده می‌کند. همچنین از ویژگی‌های CSS مانند -webkit-mask و mask برای ایجاد اشکال مختلف استفاده شده است. انیمیشن load همچنین با استفاده از کلیدهای keyframes مشخص شده است.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام